代码之家 › 专栏 › 技术社区 › Andre Pena

如何使用jquery公开iframe的dom?

dom jquery javascript

37

Andre Pena · 技术社区 · 15 年前

我有一个代表部分iframe的原型。该原型具有一个名为gotoull(…)的函数,该函数在iframe中打开给定的URL。

我的问题是:如何创建一个“internaldom”属性,并使该属性引用内部iframe的“window”对象(根dom对象)?以这样的方式:如果我的iframe公开了一个在“window”对象中有对象x的页面,我可以这样做:

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

任何帮助都将不胜感激。

附言:我接受不一定与jquery相关的答案,但我更喜欢jquery解决方案。

3 回复 | 直到 15 年前

1

65

bobince 15 年前

得到 window 对象用于框架,您可以使用 window.frames 数组:

var iframewindow= frames['iframe_name'];

这需要你给 <iframe> 老派 name 属性而不是或以及 id . 或者,如果您知道页面上iframes的顺序,您可以对其进行数字索引:

var iframewindow= frames[0];

从dom中的iframe元素获取iframe窗口通常比较灵活,但这需要一些兼容代码来处理ie:

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

jquery定义 contents() 抓取的方法 document 节点,但它不能为您提供跨浏览器的方式 文件 到 窗口 ,所以你仍然坚持:

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

这真的不是什么大胜利。

(注意:在跨框架脚本中使用jquery时要非常小心。每个帧都需要自己的jquery副本,而来自一个帧副本的方法不一定适用于来自另一个帧的节点。跨帧脚本是一个充满陷阱的主题。)

2

35

simo 13 年前

概括起来

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

3

8

andres descalzo 11 年前

更新@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中的主体

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
}