saber酱的抱枕

Fly me to the moon

07/11
08:00
学习

HTML5中的跨文档消息传递

我们可以使用HTML5的postMessage()方法进行跨文档的消息传递,不会触发跨域问题。

例如,我们可以在父窗口中向iframe里的页面或通过window.open()打开的页面发送消息(不仅限于文本数据),这两个页面不必是同源的(跨域可以,不跨域也可以)都不会触发跨域问题。

例如我在当前页面加载了下面的iframe页面:

<iframe src="http://127.0.0.1/t/index.html" id="f1"></iframe>

我们想要向它发送消息,该怎么做呢?

想要实现通信,首先得在接收页面里添加对消息的处理功能。postMessage()发送到页面时会触发message事件,我们在子页面绑定这个事件:

window.addEventListener("message",function(event){
	if (event.origin == "http://www.saber.love"){//确保发送消息的域是已知的域
		alert(event.origin+"说:"+event.data);//处理接收到的数据
		// event.source.postMessage("Received!", "http://www.saber.love");//可选:向来源窗口发送回执
	}
},false);

这样当消息发送到子页面时,子页面就能够处理了。

当触发message事件时,有一些有用的信息:
event.origin:发送消息的文档所在的域;
event.data:postMessage()发送过来的消息;
event.source:发送消息的文档的window 对象的代理。

之后我们在父页面向子页面发送消息,代码如下:

var iframeWindow = document.getElementById("f1").contentWindow;
iframeWindow.postMessage("hello~", "http://127.0.0.1"); //第二个参数指定【接收方】必须是指定的域

子页面接收到消息后就会进行处理:

到这里一个简单的通信就完成了。

这个例子中的通信是单向的,如果要做成子页面也向父页面返回消息,那么父页面也得绑定message事件才行。

不过我有个疑惑,子窗口似乎不能主动用postMessage向父窗口发送消息。只能在接收消息后趁机发送吗?

HTML5中的跨文档消息传递