如何使用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節點的contents（）方法，但它沒有為您提供從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
}