说点废话

近期深刻认识到自己能力不足,水平有限,必须沉下心来进行学习和研究,否则一辈子除了搬砖什么都做不了。
postMessage是为了解决跨窗口跨域的情况,使用不当会存在一些安全问题(虽然我没挖到Orz)。

postMessage是什么

Syntax

1
targetWindow.postMessage(message, targetOrigin, [transfer]);

不造轮子了,mdn上说的比较清楚了。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

当然了,发送消息是不行的,目标窗口肯定需要接受这个消息,所以需要在targetWindow添加一个Message的监听器。

1
2
3
4
window.addEventListener('message',function(event){
//event.data就是接收到的数据
console.log(event.data);
})

这个MessageEvent除了data属性还有source属性和origin属性是比较常见的。source属性就是发送消息的窗口的window对象,origin属性顾名思义就是发送消息的源。

在我实际测试后,无法向使用window.open得到的window对象发送消息,就像这样的。

1
2
var popup = window.open('http://www.target.com/listener.html');
popup.postMessage('Hello World!','http://www.target.com');

神奇的是,在使用setInterval大法后就正常了,但是仍然收不到第一个请求。推测是originWindow发送message时,targetWindow监听器没有加载完成。从网上随便找了个sleep函数,就像下面这样。