如何使用jQuery公开IFrame的DOM？

Question

如何使用jQuery公开IFrame的DOM？

我有一个代表特定IFrame的原型。该原型有一个名为GoToUrl（...）的函数，用于打开IFrame中的给定URL。

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

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

任何帮助，将不胜感激。

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

Answer 1

要获取window帧的对象，您可以使用该window.frames数组：var&nbsp;iframewindow=&nbsp;frames['iframe_name'];这要求你提供<iframe>一个旧学校的name属性，而不是像id。或者，如果你知道页面上iframe的顺序，你可以用数字索引它们：var&nbsp;iframewindow=&nbsp;frames[0];从DOM中的iframe元素获取iframe窗口通常更灵活，但这需要一些兼容性代码来处理IE：var&nbsp;iframe=&nbsp;document.getElementById('iframe_id');var&nbsp;iframewindow=&nbsp;iframe.contentWindow?&nbsp;iframe.contentWindow&nbsp;:&nbsp;iframe.contentDocument.defaultView;jQuery的定义内容（）方法来获取document节点，但它不会给你一个跨浏览器的方式从去document到window，所以你还是坚持了：var&nbsp;iframe=&nbsp;$('#iframe_id')[0];var&nbsp;iframewindow=&nbsp;iframe.contentWindow?&nbsp;iframe.contentWindow&nbsp;:&nbsp;iframe.contentDocument.defaultView;这不是一个真正的大胜利。（注意：使用jQuery进行跨框架脚本时要非常小心。每个框架需要自己的jQuery副本，一个框架副本的方法不一定适用于另一个框架的节点。跨框架脚本是一个充满主题的主题陷阱。）

Answer 2

把它们加起来从父页面访问iframe内容var&nbsp;iframe&nbsp;=&nbsp;$('iframe').contents();&nbsp;//&nbsp;iframe.find('..')&nbsp;...从iframe访问父页面内容var&nbsp;parent&nbsp;=&nbsp;$(window.parent.document);&nbsp;//&nbsp;parent.find('..')&nbsp;...仅当父页面和iframe页面位于同一域时才适用。编辑：在加载子iframe示例：父html<iframe&nbsp;id="iframe1"&nbsp;src="iframe1.html"></iframe><iframe&nbsp;id="iframe2"&nbsp;src="iframe2.html"></iframe>父母js$(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;iframe1&nbsp;=&nbsp;null, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe2&nbsp;=&nbsp;null; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;IE8/7 &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;frameInterval&nbsp;=&nbsp;window.setInterval(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe1&nbsp;=&nbsp;$('#iframe1').contents(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe2&nbsp;=&nbsp;$('#iframe2').contents(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($('head',&nbsp;iframe1).length&nbsp;&&&nbsp;$('head',&nbsp;iframe2).length)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.clearInterval(frameInterval); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;100); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;on&nbsp;iframe&nbsp;loaded &nbsp;&nbsp;&nbsp;&nbsp;$('#iframe1').on('load',&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe1&nbsp;=&nbsp;$('#iframe1').contents(); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;$('#iframe2').on('load',&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iframe2&nbsp;=&nbsp;$('#iframe2').contents(); &nbsp;&nbsp;&nbsp;&nbsp;});});包括IE9在内的所有主流浏览器都使用这些on('load')线路。只有IE8 / 7需要间隔块。

Answer 3

var&nbsp;frames&nbsp;=&nbsp;window.frames&nbsp;||&nbsp;window.document.frames;用于iframe中的窗口。frames["myIframeId"].window用于iframe中的文档frames["myIframeId"].window.document对于iframe中的身体frames["myIframeId"].window.document.body用jquery在iframe中的bodyvar&nbsp;iframeBody&nbsp;=&nbsp;$(frames["myIframeId"].window.document).contents().find("body");重要提示：您应始终检查文档的状态是否为“完成”，以便使用此文档if&nbsp;(frames["myIframeId"].window.document.readyState=="complete"){ &nbsp;&nbsp;&nbsp;//ok}else{ &nbsp;&nbsp;&nbsp;//perform&nbsp;a&nbsp;recursive&nbsp;call&nbsp;until&nbsp;it&nbsp;is&nbsp;complete}