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属性支持所有主流浏览器。

相关的还有一个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是索引值）也支持所有主流浏览器；

　　我们知道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操作》