用 Post Messge 實現跨域、跨窗口通訊

跨域跨窗口通訊有不少方案均可以解決，今天咱們來講說如何使用 Post Messgejavascript

基本使用

發送消息java

otherWindow.postMessage(message, targetOrigin, [transfer]);
複製代碼

otherWindow 是指其餘窗口的一個引用好比：跨域

iframe 的 contentWindow屬性
執行 window.open 返回的窗口對象
是命名過或數值索引的 window.frames 等

關鍵其實在於 otherWindow 或者叫作 targetWindow 更加準確，是指你要發送信息的目標頁面的 window 對象，直接 window.postMessage() 調用的當前窗口的 window 對象，至關於本身給本身發，目標頁固然接收不到了。關於 targetWindow 的獲取根據彈出方式不一樣分爲兩種markdown

彈出 iframe 使用 window.top 或者 window.parent 來獲取，兩者的區別在於 window.parent 返回當前窗口的直接父對象，而 window.top 返回最頂層的窗口對象
window.open() 打開新窗口使用 window.opener 獲取

接收消息oop

window.addEventListener('message', function (e) {
    console.log(e.data);
}, false)
複製代碼

應用場景

假設咱們有這樣一個需求：post

A頁面有一個登陸按鈕，點擊後打開一個新窗口B(A，B頁面不一樣源)，新窗口B頁面內輸入帳號祕密驗證後，通知A窗口已經登陸成功。ui

// A頁面  
// 1. 監聽 message 事件，監聽事件會掉
// 2. 點擊按鈕，打開窗口
<body>
    <button id='login'>去登陸</button>
    <script> let newWindow login.onclick=function(){ newWindow = window.open('./b.html','Login Page','height=400,width=400,top=20,left=20') } window.addEventListener('message', function (e) { if(e.data==='login success'){ console.log('登陸成功') newWindow?.close() // 關閉新窗口 } }, false) </script>
</body> 
 
 
 
// B頁面
<body>
    <button id="loginSuccess">點擊登陸</button>
    <script> let targetWindow = window.opener; // 獲取打開此頁面的window對象 loginSuccess.onclick=function(){ targetWindow.postMessage('login success', '*') // 第二個參數可指定發送的目標URL,*表明全部 } </script>
</body>
複製代碼

若是B窗口打開方式是在A頁面內打開Iframe，那麼 targetWindow 是 window.parent 而不是 window.openerspa

用 Post Messge 實現 跨域、跨窗口 通訊

基本使用

應用場景

用 Post Messge 實現跨域、跨窗口通訊