JS获取并操作iframe中元素的方法


Posted in Javascript onMarch 21, 2013

JS获取/设置iframe内对象元素、文档的几种方法

1、IE专用(通过frames索引形象定位):

document.frames[i].document.getElementById('元素的ID');

2、IE专用(通过iframe名称形象定位):

document.frames['iframe的name'].document.getElementById('元素的ID');

以上方法,不仅对iframe适用,对frameset里的frame也同样适用。IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的。比如这个,它在同样支持下面的标准路径之外,提供了一个简洁且形象化的写法。

3、通用方法:

document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')

注意要加上contentWindow,往往出现问题都是因为这个容易被忽略,它代表frame和iframe内部的窗口对象。

JS获取iframe文档内容

<script type="text/javascript"> 

function getIframeContent(){  //获取iframe中文档内容

 var doc;

 if (document.all){ // IE 

  doc = document.frames["MyIFrame"].document; 

 }else{ // 标准

  doc = document.getElementById("MyIFrame").contentDocument; 

 }
 return doc.body.innerHTML;

} 

</script>

注意:上面的 .contentDocument 相当于 .contentWindow.document !

一、需求与遇到的问题

在网站的后台管理中使用了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元素是一样的。

Javascript 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 #Javascript
js 验证密码强弱的小例子
Mar 21 #Javascript
javascript中日期转换成时间戳的小例子
Mar 21 #Javascript
Javascript算符的优先级介绍
Mar 20 #Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 #Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 #Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 #Javascript
You might like
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
javascript操作数组详解
2014/12/17 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python列表生成器的循环技巧分享
2015/03/06 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python中update的基本使用方法详解
2019/07/17 Python
Python遍历字典方式就实例详解
2019/12/28 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Python二元算术运算常用方法解析
2020/09/15 Python
python 基于opencv操作摄像头
2020/12/24 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
乡镇信息公开实施方案
2014/03/23 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
通知范文怎么写
2015/04/16 职场文书
初中班主任心得体会
2016/01/07 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS