如何使用jQuery公开IFrame的DOM？

我有一个代表特殊IFrame的原型。 该原型有一个名为GoToUrl（…）的函数，可以在IFrame中打开给定的URL。

我的问题是：如何创build一个“InternalDOM”属性，并使该属性引用IFrame内的“窗口”对象（根DOM对象）？ 以这样的方式：如果我的IFrame公开了一个页面，其中有一个对象X的“窗口”对象，我可以这样做：

MyFrameObject.GoToUrl(pageXurl); MyFrameObject.InternalDOM.X 

任何帮助，将不胜感激。

PS：我会接受不一定与jQuery相关的答案，但我更喜欢jQuery解决scheme。

Answer 1

要获得一个框架的window对象，你可以使用window.frames数组：

 var iframewindow= frames['iframe_name']; 

这就要求你给<iframe>一个老派name属性，而不是像id那样好或者差。 另外，如果你知道页面上的iframe的顺序，你可以用数字来索引它们：

 var iframewindow= frames[0]; 

从DOM中的iframe元素获取iframe窗口通常更加灵活，但这需要一些兼容性代码来处理IE：

 var iframe= document.getElementById('iframe_id'); var iframewindow= iframe.contentWindow? iframe.contentWindow : iframe.contentDocument.defaultView; 

jQuery定义了content（）方法来获取document节点，但是它并没有给你一个从document到window的跨浏览器的方式，所以你仍然坚持：

 var iframe= $('#iframe_id')[0]; var iframewindow= iframe.contentWindow? iframe.contentWindow : iframe.contentDocument.defaultView; 

这不是一个真正的大赢家。

（注意：使用jQuery进行交叉框架脚本时要非常小心，每个框架都需要自己的jQuery副本，并且一个框架副本中的方法不一定能够在另一个框架上工作，跨框架脚本是一个令人困惑的主题陷阱。）

Answer 2

把它们加起来

从父页面访问iframe内容

 var iframe = $('iframe').contents(); // iframe.find('..') ... 

从iframe访问父页面内容

 var parent = $(window.parent.document); // parent.find('..') ... 

这仅适用于父级和iframe页面在同一个域上的情况。

编辑：加载子iframes示例：

父母的HTML

 <iframe id="iframe1" src="iframe1.html"></iframe> <iframe id="iframe2" src="iframe2.html"></iframe> 

父母js

 $(function () { var iframe1 = null, iframe2 = null; // IE8/7 var frameInterval = window.setInterval(function () { iframe1 = $('#iframe1').contents(); iframe2 = $('#iframe2').contents(); if ($('head', iframe1).length && $('head', iframe2).length) { window.clearInterval(frameInterval); } }, 100); // on iframe loaded $('#iframe1').on('load', function (e) { iframe1 = $('#iframe1').contents(); }); $('#iframe2').on('load', function (e) { iframe2 = $('#iframe2').contents(); }); }); 

包括IE9在内的所有主stream浏览器都使用on('load')行。 只有IE8 / 7需要间隔块。

Answer 3

更新@RoyiNamir的评论：

 var frames = window.frames || window.document.frames; 

用于iframe中的窗口。

 frames["myIframeId"].window 

用于iframe中的文档

 frames["myIframeId"].window.document 

用于iframe中的body

 frames["myIframeId"].window.document.body 

为与jQuery的iframe身体

 var iframeBody = $(frames["myIframeId"].window.document).contents().find("body"); 

重要提示：您应该始终检查文档是否处于“完成”状态才能使用

 if (frames["myIframeId"].window.document.readyState=="complete") { //ok } else { //perform a recursive call until it is complete }