iframe內聯框架之巧妙跨域

做者 zhangl

iframe是什麼

• iframe就是一個html標籤dom元素

做用

• 能夠將一個網頁嵌入另外一個網頁
  • 導航tab欄、在線編輯、廣告植入等
• 歷史記錄管理，解決ajax致使的網站響應瀏覽器前進後退的方案
• 跨域通訊等

iframe弊端

• 阻塞頁面加載

獲取iframe內的window

獲取子窗口

1. document.getElementsByTagName('iframe')[0].contentWindow
2. document.getElementById('id')[0].contentWindow
3. window.frames['iframe的name']

獲取父窗口

1. window.parent

IE專用

1. document.iframes[name].contentWindow
2. document.iframes[i].contentWindow

取值

父取子

<!--父-->
<iframe src="./children.html" frameborder="1"></iframe>
<!--獲取子變量-->
<script> var cIframe = document.getElementsByTagName('iframe')[0]; cIframe.onload = function () { console.log(cIframe.contentWindow.childrenAge); }; </script>
複製代碼

<!--子-->
<!--定義變量-->
<script> var childrenAge = 20; </script>
複製代碼

子取父

<!--父-->
<iframe src="./children.html" frameborder="1"></iframe>
<!--定義變量-->
<script> var fatherAge = 50; </script>
複製代碼

<!--子-->
<!--獲取變量-->
<script> var fIframe = window.parent; console.log(fIframe.fatherAge); </script>
複製代碼

父子頁面窗口的關係

• window.self -- 本身
• window.parent -- 父級窗口對象
• window.top -- 頂級窗口對象

判斷iframe加載完成

非IE下使用onload

iframe(dom元素).onload = function () {}
複製代碼

IE下使用onreadystatechange

iframe.onreadystatechange = function () {
    if (iframe.readyState === 'complete' || iframe.readyState === 'loaded') {
        alert('Local iframe is now loaded');
    }
}
複製代碼

父子窗口跨域通訊

hash

<!--origin http協議--> 
<iframe src="./iframe2.html" frameborder="1"></iframe>
<script> var oIframe = document.getElementsByTagName('iframe')[0]; var oIframeSrc = oIframe.src; var age = 55; document.onclick = function () { oIframe.src = oIframeSrc + '#' + age; age++; }; </script>
複製代碼

<!--target file協議-->
<div>iframe2222</div>
<script> var lct = window.location; var preHash = lct.hash; setInterval(function () { if (preHash !== lct.hash) { console.log(lct.hash); preHash = lct.hash; } }, 300); </script>
複製代碼

觸發origin頁面點擊事件，查看target頁面的執行結果

• 缺點：
  • target頁須要使用計時器不斷查看hash值變化, 性能消耗大
  • origin頁面不能獲取到target頁面的數據
  • 數據放入hash中不安全
  • 大小受到限制

window.name

這裏須要藉助一個臨時頁面充當兩個跨域頁面的橋樑

<!--target http協議--> 
<iframe src="./iframe2.html" frameborder="1"></iframe>
<script> var oIframe = document.getElementsByTagName('iframe')[0]; var flag = true; oIframe.onload = function () { if (flag) { oIframe.src = './temp.html'; flag = false; } else { console.log(oIframe.contentWindow.name); } }; </script>
複製代碼

<!--tmep-->
空
複製代碼

<!--orgin file協議-->
<div>iframe2222</div>
<script> window.name = 20; </script>
複製代碼

• 缺點：
  • 數據放入hash中不安全
  • 大小受到限制