出自:http://www.css88.com/archives/2343
看到断桥残雪
对我上一篇日志的回复我也学习了一下JS操作iframe里的dom;主要参考了断桥残雪的《用JavaScript在IE和Firefox下进行iframe的DOM操作
》和支付宝UED的《用JS访问操作iframe里的dom
》,非常不错的两篇文章。
一、父级窗口操作iframe里的dom
JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所
在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进
行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器
。
相关的还有一个contentDocument属性,这个属性是指指定的frame或者iframe所在的document对象,但是悲剧的是,ie6-ie7并不支持这个属性。
ie6和ie7还可以使用document.frames["iframe Name"]或者
document.frames["iframe ID"]来获取相当于contentWindow属性,而firefox和chrome并不支持这些
document.frames["iframe Name"]或者document.frames["iframe ID"],但是window.frames["iframe Name"]或window.frames[index](index是索引值)也支持所有主流浏览器
;
这个可以看实例:http://www.css88.com/demo/iframe-correspond/index-test.html
我们知道document对象是window对象的一个子对象,所以我们可以通过
document.getElementById(“iframe ID”).contentWindow.document来获取iframe的
document对象,相当于contentDocument属性。
二、iframe里的js操作父级窗口的dom
iframe里的js要操作父级窗口的dom,必须搞懂几个对象:
parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),
top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),
self是当前窗口(等价window),
opener是用open方法打开当前窗口的那个窗口;
这样iframe里的js要操作父级窗口的dom可以通过parent,top这些对象来获取父窗口的window对象,例如:
parent.document.getElementById(“dom ID”);
parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;
————————————————
查看一下JS操作iframe里的dom的demo:http://www.css88.com/demo/iframe-correspond/
虽然iframe在现在WEB开发中越来越少用到了,但是iframe还有很多值得使用的地方,比如使用iframe解决跨域问题.关于
iframe还有很多东西要学习,比如iframe自适应高度,使用iframe解决跨域问题,iframe加载问题,iframe加载性能问题等等,还
有很多东西要学习,
分享到:
相关推荐
本篇主要是对JS操作iframe里的dom进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴下index.html和iframe引入的a.html内容。 index-> <iframe src=a.html frameborder=0 name=one id=iframeId></iframe> ...
dom-to-image.js 个人修改源码之后,支持嵌入iframe的网页截图。 导入js,直接调用shotScreen()函数即可。
iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法
1、动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js、css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式...
本文主要给大家介绍了关于利用JS对iframe父子(内外)页面进行操作的方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 一、获取iframe里的内容 在开始之前,首先我们来看看如何获取iframe里的内容,获取...
自己整理的一个JS函数库 AJAX dom隐藏显示 数据整理 只有12KB 压缩后5kb 使用方法 引入文件 然后就可以直接使用了 具体函数方法如下 /* $(id) 根据元素id返回对象 N(name, i) 根据元素name返回对象,可能会有多个...
用原生JS我们经常使用[removed]事件来加载页面。...如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了。Firefox有DOMContentLoaded事件可以轻松解决,可惜的就是IE没有。 MSDN关于JSCRIPT的
主站点内嵌代理页面, 并向代理页传递数据, 代理页根据主站点的数据对目标页的DOM进行操作.由于代理页与目标页同域, 所以代理页可以获取并操作目标页的document对象. 前提条件 需要将proxy.html放到与内嵌的iframe页...
主要介绍了解决vue页面渲染但dom没渲染的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
1.需求场景 ...对于div的resize事件的监听,实现方式有很多,比如定时器检查,通过scroll事件等等,本文主要介绍通过iframe 元素来实现监听。 不过我们可以间接利用window的resize事件监听来实现对于
iframe尺寸调整器React 该库是用于的官方React接口,该接口可自动调整相同和跨域iFrame的高度和宽度,以适应其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度...
最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(RIA)应用程序,页面中大量调用iframe。后期测试发现浏览器内存一直居高不下,而且打开iframe页面越多内存占用越大,...* @param dom 创建iframe的容器,即在
iFrame Resizer V4 通过该库,可以自动调整相同和跨域iFrame的高度和宽度的大小,以适合其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame调整为内容大小的高度和宽度。 适用...
以下代码在IE8下运行通过,在IE9中出错: 代码如下:document.createElement(‘<...错误提示:exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5) 思路分析:第一步:兼容IE9,firefox,Opera,Safar
Frames 是一个简单的辅助函数,它创建一个预先配置的 iframe 并将其附加到给定的 DOM 元素,同时提供一个很好的 API 来与 iframe 交互。 这个模块假设它被一个 Node.js 兼容的模块系统使用。 安装 npm install ...