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 相关文章推荐
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
校园标语大全
2014/06/19 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
重温入党誓词主持词
2015/06/29 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python