window.postMessage安全地實現跨源通訊
window.postMessage()方法可以安全地實現跨源通訊。通常，對於兩個不同頁面的指令碼，只有當執行它們的頁面位於具有相同的協議（通常為https），埠號（443為https的預設值），以及主機 (兩個頁面的模數Document.domain設定為相同的值) 時，這兩個指令碼才能相互通訊。window.postMessage()方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。
從廣義上講，一個視窗可以獲得對另一個視窗的引用（比如targetWindow = window.opener），然後在視窗上呼叫targetWindow.postMessage()方法分發一個 MessageEvent訊息。接收訊息的視窗可以根據需要自由處理此事件 (en-US)。傳遞給window.postMessage()的引數（比如message ）將通過訊息事件物件暴露給接收訊息的視窗。
otherWindow.postMessage(message, targetOrigin, [transfer]);
例如：vue專案中，呼叫iframe子網頁中的方法 和在iframe子頁面中呼叫vue父頁面中的方法。
父頁面程式碼：
<body> <h1>我是父頁面</h1> <iframe src="http://127.0.0.1:5050" frameborder="0" style="height: 100%;width: 100%"></iframe> <script> functionfatherFunction() { alert('我是父頁面中的方法！') } window.addEventListener('message', function(e){ console.log(e) //{data:'params'} fatherFunction() }) </script> </body>
子頁面程式碼：
<template> <div class="weather-app" :class="currentWeatherBG"> <button @click="test">我是子頁面按鈕，點選呼叫父頁面方法</button> </div> </template> <script> exportdefault { methods: { test() { window.parent.postMessage({ data :"params" },'*'); }, } } </script>
可以看到，這裡關鍵是子頁面通過postMessage方法實現的通訊，postMessage的使用方法為：
otherWindow.postMessage(message, targetOrigin, [transfer]);
message為需要傳遞的資訊，
targetOrigin為指定哪些視窗能接收到訊息事件，可以為’*’，但是這樣很不安全，建議根據實際專案精確匹配。
而父頁面則只需要新增事件監聽器，在回撥中執行需要執行方法或者使用引數。
window.addEventListener('message', function(e){
console.log(e) //{data:'params'}
fatherFunction()
})