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. 最重要的一點：就是代碼寫起來輕鬆多了。

 

另外：對於window.subWindowName的構建方式不少，這個便可以寫死，也能夠經過父層頁面的src利用url傳遞進來。怎麼使用就看本身的需求了。

 

 

---

原文地址 http://www.zizhusoft.com/note/show.aspx?id=14520a63-c7e8-42e9-a87e-77aec7adab0a 。