解決iframe跨域跟父級進行通訊問題【postMessage】 重點是跨域進行通訊！

 

解決iframe跨域跟父級進行通訊問題【使用postMessage】 重點是跨域進行通訊！

---

前言

 

iframe跟父級如果同源，iframe中可以通過window.parent對父級進行任意操作，例如：操作Dom、觸發父級事件等，但父級跟iframe地址不同源(簡單說明下，不同源是兩個url地址所處域名不同或端口號不同，都會導致不同源)，此時如果我們通過window.parent去操作父級方法或者dom，遊覽器會因跨源導致報錯  // Uncaught DOMException: Blocked a frame from accessing a cross-origin frame，進而無法操作父級有關方法、dom等，無法完成子與父之間通訊。

---

一、什麼是postMessage？

postMessage()方法允許來自不同源的腳本採用異步方式進行有限通信。可以實現跨窗口、跨域消息傳遞。

二、postMessage遊覽器兼容

兼容性也是比較好的，可以放心大膽使用 圖片來源 (caniuse.com)

三、如何使用

1. 子界面(iframe)調用window.parent.postMessage()通知父
2. 父監聽子界面發送的信息，並對信息進行處理

具體實現方式如下：模擬子界面token失效後，通知父界面退出登錄

---

子界面代碼：

<script>
   //子界面發送通知 第一個參數是通知內容,當然也可以傳遞對象格式，建議傳遞對象格式時候轉成JSON字符  串進行傳輸，以防止低版本IE不支持
  window.parent.postMessage("exit", "*");
</script>

父界面代碼：

<script> 
 //全局監聽一下傳遞消息的事件，兼容性寫法，低版本IE上使用attachEvent進行監聽。
 if (typeof window.addEventListener != 'undefined') {
      window.addEventListener('message', callbackMessage, false);
 } else if (typeof window.attachEvent != 'undefined') {
      window.attachEvent('onmessage', callbackMessage);
 }
 //監聽到子傳遞消息之後傳遞的方法
 var callbackMessage = function(event) {
    //可以看下傳遞的參數，通常可以獲取傳遞界面的域名端口用來安全性限制。
    console.log("event=>", event)
    //獲取傳遞的數據
    var data = event.data
    //如果傳遞的數據是exit，執行退出操作
    if (data == 'exit') layui.view.exit()
}
</script>

---

總結

通過此方式可以解決父子直接傳遞消息，需要注意的是，父接受子傳遞消息時，應校驗一下來源。