解決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)

三、如何使用

子界面(iframe)呼叫window.parent.postMessage()通知父
父監聽子界面發送的資訊，并對資訊進行處理

具體實作方式如下：模擬子界面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>
總結

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/251692.html

標籤：其他

上一篇：從頭到尾跑起來一個SpringBoot系統

下一篇：黑客一些常見的專業術語解釋

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

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

前言

二、postMessage游覽器兼容

三、如何使用

總結

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

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