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 。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM