跨文档消息传递应用

Bertha 。 2022-05-12 00:48 193阅读 0赞

**一 应用**

source.html程序调用window的open方法打开一个新的窗口，接下来程序即可调用新窗口对应的window对象的postMessage向该文档发送消息。

**二 代码**

1、source.html

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 跨文档发送消息 </title>
    	<script type="text/javascript">
    	var send = function() 
    	{
    		// 打开一个新窗口
    		var targetWin = window.open('http://localhost/test1/1/target/target.html'
    			,'_blank','width=400,height=300');    //①
    		// 等该窗口装载完成时，向该窗口发送消息
    		targetWin.onload = function ()
    		{ 
    			// 向http://localhost:8888/target发送消息
    			targetWin.postMessage(document.getElementById("msg").value
    				, "http://localhost/test1/1/target");    //②
    		}
    	}
    	// 通过onmessage监听器监听其他窗口发送回来的消息
    	window.onmessage = function(ev) 
    	{
    		// 忽略来自其他域名的跨文档消息（只接受http://localhost的消息）
    		if (ev.origin != "http://localhost") 
    		{
    			return;
    		}
    		var show = document.getElementById("show");
    		// 显示消息
    		show.innerHTML += (ev.origin + "传来了消息:" + ev.data + "<br/>");
    	};
    	</script>
    </head>
    <body>
    	消息：<input type="text" id="msg" name="msg"/>
    	<button οnclick="send();">发送消息</button>
    	<div id="show"></div>
    </body>
    </html>

2、target.html

<!DO
    CTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 跨文档发送消息接收 </title>
    	<script type="text/javascript">
    		window.onmessage = function(ev) 
    		{
    			// 忽略来自其他域名的跨文档消息（只接受http://localhost:8888的消息）
    			if (ev.origin != "http://localhost") 
    			{
    				return;
    			}
    			document.body.innerHTML = (ev.origin + "传来了消息:" + ev.data);
    			// 向发送该消息的页面回传消息
    			ev.source.postMessage("回传消息，这里是" + this.location
    				, ev.origin);    //①
    		};
    	</script>
    </head>
    <body>
    </body>
    </html>

**三 运行结果**

![cad15a9d-d005-3814-94a6-6138238d5cef.png][]

[cad15a9d-d005-3814-94a6-6138238d5cef.png]: /images/20220512/f3b9a3a4a496418a8ea9cc047408cb04.png