一、需求与遇到的问题 　　在网站的后台管理中使用了iframe框架布局，包括顶部菜单、左侧导航和主页面。需求是：点击主页面上的一个按钮，在顶部菜单栏的右侧显示“退出”链接，点击可退出系统。 　　我的思路是：在顶部的菜单页面放一个不可见的“退出”链接，当用户点击位于iframe中的主页面（mainPage.htm）中的按钮时，在顶部菜单页面的右侧显示“退出”。 　　我现在遇到的问题是：如何在页面的一个iframe子页面（mainPage.htm）中获取并且操作其它iframe子页面（比如topPage.htm）中的HTML元素？ 二、通过JS获取并操作iframe中的元素来解决问题 　　这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。 　　经过我在网上查资料，找到了JS操作iframe中HTML元素的方法。示例如下。复制代码 代码如下: function ShowExit() { //获取iframe的window对象 var topWin = window.top.document.getElementById("topNav").contentWindow; //通过获取到的window对象操作HTML元素，这和普通页面一样 topWin.document.getElementById("exit").style.visibility = "visible"; }　　说明：第一步，通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面（topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通HTML元素是一样的。

　　推荐阅读

　　JQuery入门—JQuery程序的代码风格详细介绍

《jQuery权威指南》第1章jQuery开发入门，本章通过循续渐进的方式，先从jQuery的基础概念入手，介绍jQuery库的下载，引入简单应用方法；后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍，通过一些简单的小示例，>>>详细阅读

本文标题：JS获取并操作iframe中元素的方法

地址：http://www.17bianji.com/kaifa2/JS/22621.html

 1/2    1