H5新增的postMessage跨域解決方案Demo

Demo背景：html中使用iframe嵌入了跨域的vue項目，在html中將參數傳入到跨越的vue項目中。

 

向跨越的子窗口中發送數據

function sendMessage(data) {
    // 經過 postMessage 向子窗口發送數據
   document.querySelector(".ifm_analysis").contentWindow.postMessage(data, "*")
}

在跨越的子窗口中接收數據

// 記錄vue實例地址的變量
let currVM
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    // event.source.postMessage("", event.origin);
    // 頁面轉入子窗口頁面時，啓動檢測監聽的參數
    if (document.location.href.indexOf("consignew") > -1) {
        // 調用vue實例中的searchConsignsByIdArr方法
        currVM.searchConsignsByIdArr(event.data)
    }
}