我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在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操作》