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

Posted 2020-10-27 sangzs

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)
    }
}