跨 html 消息传递

最新推荐文章于 2022-10-11 10:56:01 发布

若节

最新推荐文章于 2022-10-11 10:56:01 发布

阅读量810

点赞数

分类专栏： Html+CSS

本文链接：https://blog.csdn.net/qq_33665647/article/details/69403125

版权

本文介绍了在HTML页面间进行消息传递的方法，主要利用window.postMessage发送消息及通过window.onmessage监听并处理接收到的数据。消息包括文本、JSON等格式，同时讨论了如何获取和设置目标窗口，以及MessageEvent对象的属性。

摘要由CSDN通过智能技术生成

跨html进行消息传递靠的是window 对象新增的一个方法和一个对象监听器属性

该方法是 targetWindow.postMessage(message , targetOrigin);

此方法向 targetWindow 窗口中的 html 发送消息，所以应先获取这个窗口。message 为带发送的数据，而 targetOrigin 表示发送源的域名。

这个对象监听器为 window.onmessage 这个属性是一个形如 function(event) { } 的函数。

这个 onmessage 所指定的函数的参数为 MessageEvent 对象含有五个只读属性

1）data 表示发送来的消息的数据，这个数据可以是各种格式，比如文本，还可以是 json格式。

2）origin 属性返回发送此消息的源域名

3）lastEventId 该消息的 ID，即唯一标识

4）source 返回发送该消息的窗口

一些问题：

获取window窗口对象一般有两种方式：

1.可以新打开一个页面

		// 打开一个新窗口
		var targetWin = window.open('http://localhost:8888/target/target.html'
			,'_blank','width=400,height=300');    //①
		// 等该窗口装载完成时，向该窗口发送消息
		targetWin.onload = function ()
		{ 
			// 向http://localhost:8888/target发送消息