iframe的Dom操作

  我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理。也就是说我们需要在父级页面中操作子页面(iframe)的dom。

我查找了一些资料,简单做了一些整理。

  主要分成两个方向来说明: 父级页面操作子页面 和 子页面 操作父级页面。

一、父级页面操作子页面

  这里面存在一个问题:两个页面不能跨域(小域名也要相同)。iframe操作是有跨域限制的,试想以下我的页面的iframe引用了竞争对手的页面,但是我用父级页面做一些压力攻击。岂不是非诚的不安全。但是在我的需求中,这不是问题父级页面和子集页面都是东家的。

jquery:

$('#iframe').contents().find('选择器')

 原生JS:

  JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器

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是索引值)也支持所有主流浏览器

  我们知道document对象是window对象的一个子对象,所以我们可以通过contentWindow.document来获取iframe的document对象,相当于contentDocument属性。

document.getElementById(“iframe ID”).contentWindow.document

 

、子页面(iframe)操作父级页面

jQuery: 

$(window.parent.document).find("选择器"); 

原生JS:

parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口(等价window),opener是用open方法打开当前窗口的那个窗口;

parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;

parent.document.getElementById(“dom ID”)

 

  关于iframe的dom操作,我参考了以下文章,受益匪浅《JS操作iframe里的dom》 、《用JS访问操作iframe里的dom》和 《用JavaScript在IE和Firefox下进行iframe的DOM操作

 

      

    

    

  

posted on 2015-07-21 16:46  前端—郭瑞  阅读(1971)  评论(0编辑  收藏  举报

导航