技术博客

今天研发的同事找我帮忙看合作方提供的html SDK问题，我发现页面上用了iframe和postMessage()方法。开始我以为是他们自己封装了一个ajax请求方法在原型链上，仔细看了下代码才发觉这个是浏览器原生自带的方法，顿时很诧异，是我自己孤陋寡闻了。

//自己给自己（当前页面）发送消息

window.postMessage("要发送的信息字符串", "*");

//给新打开的页面发消息

var newpage = window.open("新页面"); //window.open是异步的，打开后想立马发送消息最好加setTimeout

setTimeout(()=>{

  newpage.postMessage("要发送的信息字符串", "*");

}, 10);

//iframe给父级页面发消息

window.parent.postMessage("要发送的信息字符串", "*");

//页面接收消息

window.addEventListener("message", (e) => {

console.log(e);

alert("有新消息");

})