在Web前端開發(fā)中，我們經(jīng)常會(huì)用到iframe這個(gè)控件。

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

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

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

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

父頁面代碼：

window.iframeWindow = null;
function frameReady(subWindow){
window.iframeWindow = subWindow; //賦值
}; 
<iframe src = "xx" ></iframe> 

子頁面代碼：

$(function(){
window.parent.frameReady(window);
}); 

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

如果我有多個(gè)iframe該怎么辦呢？

這種情況會(huì)稍微復(fù)雜一點(diǎn)，但是沒關(guān)系。我們想繼續(xù)使用上面的方案，就分析一下現(xiàn)狀：

1.我們應(yīng)該會(huì)需要一個(gè)類似iframeWindows的集合對(duì)象，用于管理所有子頁面的window對(duì)象。

2.每個(gè)子頁面在調(diào)用parent.frameReady時(shí)，必須靠訴父頁面一個(gè)唯一名稱，使得我們可以在父頁面中對(duì)各個(gè)iframe進(jìn)行精確訪問

那么這下就簡(jiǎn)單了，子頁面要做的事，無非就是一個(gè)名稱、編號(hào)啥的，我們來看代碼

window.subWindowName = "HelloWorldWindow";
$(function(){
window.parent.frameReady(window.subWindowName, window);
}); 

那么父頁面要做的事就是重構(gòu)frameReady并增加一個(gè)參數(shù)

window.iframeWindows = {}; //這里變成了一個(gè)對(duì)象
function frameReady(name, window){
window.iframeWindows[name] = window;
};
function getSubWindow(name){
return window.iframeWindows[name];
}

總結(jié)：

通過這種方案構(gòu)建的頁面存在以下優(yōu)點(diǎn)：

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

2.window對(duì)象統(tǒng)一化，減少了每次使用時(shí)再請(qǐng)求的引用鏈，提高了運(yùn)行的速度

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

以上所述是小編給大家介紹的Javascript iframe交互并兼容各種瀏覽器的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論