這篇文章主要介紹了Javascript iframe交互并兼容各種瀏覽器的解決方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

在Web前端開發中，我們經常會用到iframe這個控件。

但是這個控在內、外交互時，往往各個瀏覽器所用的關鍵字不同，很是麻煩，為了能夠得到子iframe中的window對象，各家瀏覽器有著各家的指定，有的是window，有的是contentWindow等等也許還有我們不知道的。

但是從子頁面訪問父層頁面，其本上大家都是window.parent就可以了。

那么通過這個特征，我們可以在子頁面中，把自身的window對象傳遞給父頁面就可以了，這樣父頁面就很輕松的訪問子頁面，再也不用靠慮如何從iframe對象上得到window對象了。

二話不說，我們先看代碼：

父頁面代碼：

window.iframeWindow = null;

function frameReady(subWindow){

window.iframeWindow = subWindow; //賦值

}; 

<iframe src = "xx" ></iframe>

子頁面代碼：

$(function(){

window.parent.frameReady(window);

});

通過上面簡單的代碼，就可以在父頁面中訪問iframeWindow對象，直接得到了子頁面的window對象，非常無腦也非常好用。

如果我有多個iframe該怎么辦呢？

這種情況會稍微復雜一點，但是沒關系。我們想繼續使用上面的方案，就分析一下現狀：

1.我們應該會需要一個類似iframeWindows的集合對象，用于管理所有子頁面的window對象。

2.每個子頁面在調用parent.frameReady時，必須靠訴父頁面一個唯一名稱，使得我們可以在父頁面中對各個iframe進行精確訪問

那么這下就簡單了，子頁面要做的事，無非就是一個名稱、編號啥的，我們來看代碼

window.subWindowName = "HelloWorldWindow";

$(function(){

window.parent.frameReady(window.subWindowName, window);

});

那么父頁面要做的事就是重構frameReady并增加一個參數

window.iframeWindows = {}; //這里變成了一個對象

function frameReady(name, window){

window.iframeWindows[name] = window;

};

function getSubWindow(name){

return window.iframeWindows[name];

}

總結：

通過這種方案構建的頁面存在以下優點：

1.父子頁面的交互僅依賴于parent關鍵字（而以前的方式中，不僅依賴parent，還要依賴contentWindow、window等其它不確定關鍵字，最重要的是parent的支持還是非常好的）

2.window對象統一化，減少了每次使用時再請求的引用鏈，提高了運行的速度

3.最重要的一點：就是代碼寫起來輕松多了。

以上所述是小編給大家介紹的Javascript iframe交互并兼容各種瀏覽器的解決方法，希望對大家有所幫助