如何使用jQuery公开IFrame的DOM？

Question

我有一个代表特定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

更新@RoyiNamir的评论:

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
}