如何使用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 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的定义内容（）方法来获取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页面位于同一域时才适用。

编辑：在加载子iframe示例：

父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在内的所有主流浏览器都使用这些on('load')线路。只有IE8 / 7需要间隔块。

Answer 3

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

用于iframe中的窗口。

frames["myIframeId"].window

用于iframe中的文档

frames["myIframeId"].window.document

对于iframe中的身体

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

用jquery在iframe中的body

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}