跨 html 消息传递

最新推荐文章于 2024-07-24 21:07:24 发布

若节

最新推荐文章于 2024-07-24 21:07:24 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

分类专栏： Html+CSS

本文链接：https://blog.youkuaiyun.com/qq_33665647/article/details/69403125

Html+CSS 专栏收录该内容

21 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨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发送消息
			targetWin.postMessage(document.getElementById("msg").value
				, "http://localhost:8888/target");    //②
		}

2.可以是从消息MessageEvent中通过 source 属性获取此窗口

		window.onmessage = function(ev) 
		{
			// 忽略来自其他域名的跨文档消息（只接受http://localhost:8888的消息）
			if (ev.origin != "http://localhost:8888") 
			{
				return;
			}
			document.body.innerHTML = (ev.origin + "传来了消息:" + ev.data);
			// 向发送该消息的页面回传消息
			ev.source.postMessage("回传消息，这里是" + this.location
				, ev.origin);    //①
		};

发送和接受json数据

发送json数据

			// 等该窗口装载完成时，向该窗口发送消息
			targetWin.onload = function ()
			{ 
				var data = [
					{
						name : '疯狂Java讲义',
						price : 109,
						author : 'yeeku'
					},
					{
						name : '疯狂Android讲义',
						price : 89,
						author : 'yeeku'
					},
					{
						name : '轻量级Java EE企业应用实战',
						price : 99,
						author : 'yeeku'
					}
				];
				// 向http://localhost:8888/target发送消息
				targetWin.postMessage(data
					, "http://localhost:8888/target");    //①
			}

接收json数据

		window.onmessage = function(ev) 
		{
			// 忽略来自其他域名的跨文档消息（只接受http://localhost:8888的消息）
			if (ev.origin != "http://localhost:8888") 
			{
				return;
			}
			srcWin = ev.source;
			srcOrigin = ev.origin;
			// 接收到其他文档发送过来的消息
			var books = ev.data;
			var bookTb = document.getElementById("bookTb");
			for(var i = 0 ; i < books.length ; i++)
			{
				var row = bookTb.insertRow(i);
				row.insertCell(0).innerHTML = books[i].name;
				row.insertCell(1).innerHTML = books[i].price;
				row.insertCell(2).innerHTML = books[i].author;
				row.insertCell(3).innerHTML = "<input name='choose' type='radio'"
					+ " onclick='chooseItem(this);'/>";
			}
		};

这个与ajax 处理返回json数据的函数是不同的，没有将字符串转化为json对象的那一步。