跨文档消息传输之postMessage()

最新推荐文章于 2022-09-01 20:35:13 发布

qq_30815929

最新推荐文章于 2022-09-01 20:35:13 发布

阅读量564

点赞数

分类专栏： Cookie和Session 文章标签： cookie

Cookie和Session 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域+端口号）的web网页之间可以互相通信，甚至可以实现跨域通信。
首先，要想接受从其他的窗口那里发过来的消息，就必须对窗口对象的message事件进行监视。
使用window对象的postMessage方法向其他窗口发送消息。

具体案例主页面中包括一个iframe，iframe的src指向与主页面不在一个域下的网页，这两个网页之间进行消息传输如下：

主页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨文档消息传输示例</title>
</head>
<body>
<iframe src="http://193.168.19.168/ztree/demo/cn/msg.html" width="400" height="400" onload="sendMsg();"></iframe>
<div id="div1">
</div>
<script type="text/javascript" charset="utf-8">
//绑定onmessage事件,接收消息！
addEventListener('message',function(e){
e=e||event;
//e.origin：协议+域名+端口（80默认不显示）
//e.data:消息内容
var obj=JSON.parse(e.data);
if(!obj.error){
alert('接收成功！');
document.getElementById('div1').innerHTML='从e.origin='+e.origin+',那里来的消息e.data='+e.data;
}
},false);
function sendMsg(){
//这里必须获得iframe窗口的window对象
//且不要用document.getElementByTagName('iframe')[0]
var winIframe=window.frames[0];
setTimeout(function(){
//iframe窗口加载完成，使用postMessage向iframe内发送消息
//第一个参数为：消息内容
//第二个参数为：接收消息的对象窗口url,一般与iframe的src一致或url只到端口号http://193.168.19.168/
winIframe.postMessage('{"张三":10,"李四":20,"王五":30,"小明":40,"小白":50,"老五":60,"老周":67}',"http://193.168.19.168/ztree/demo/cn/msg.html");
},2000);
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨文档消息传输示例</title>
	</head>
	<body>
		<iframe src="http://193.168.19.168/ztree/demo/cn/msg.html" width="400" height="400" οnlοad="sendMsg();"></iframe>
		<div id="div1">
			
		</div>
		<script type="text/javascript" charset="utf-8">
			//绑定onmessage事件,接收消息！
			addEventListener('message',function(e){
				e=e||event;
				
				//e.origin：协议+域名+端口（80默认不显示）
				//e.data:消息内容
				
				var obj=JSON.parse(e.data);
				
				if(!obj.error){
					alert('接收成功！');
					document.getElementById('div1').innerHTML='从e.origin='+e.origin+',那里来的消息e.data='+e.data;
				}
			},false);
			
			
			function sendMsg(){
				//这里必须获得iframe窗口的window对象
				//且不要用document.getElementByTagName('iframe')[0]
				var winIframe=window.frames[0];

				setTimeout(function(){
					//iframe窗口加载完成，使用postMessage向iframe内发送消息
					//第一个参数为：消息内容
					//第二个参数为：接收消息的对象窗口url,一般与iframe的src一致或url只到端口号http://193.168.19.168/
					winIframe.postMessage('{"张三":10,"李四":20,"王五":30,"小明":40,"小白":50,"老五":60,"老周":67}',"http://193.168.19.168/ztree/demo/cn/msg.html");
				},2000);
			}
		</script>
	</body>
</html>

iframe指向的页面：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe内容</title>
<script type="text/javascript" charset="utf-8">
//绑定onmessage事件,接收消息
addEventListener('message', function(e) {
e = e || event;
//可以过滤域
if (e.origin == 'http://127.0.0.1:8020') {
alert('可以信任的信源');
//接收从e.origin发来的消息e.data
var obj = JSON.parse(e.data), aHtml = [];
for (var key in obj) {
var age = obj[key], str = '';
switch(true) {
case age<=10:
str = key + '小朋友今年' + age + '岁。';
break;
case age<=20:
str = key + '年青人今年' + age + '岁。';
break;
case age<=30:
str = key + '中年人今年' + age + '岁。';
break;
case age<=40:
str = key + '壮汉今年' + age + '岁。';
break;
case age<=50:
str = key + '猛男今年' + age + '岁。';
break;
case age<=60:
str = key + '快退休了，今年' + age + '岁。';
break;
default:
str = key + '老年人今年' + age + '岁。';
break;
}
aHtml.push(str);
}
document.body.innerHTML = '从e.origin=' + e.origin + ',发来的消息e.data=<br />' + aHtml.join('<br />');
} else {
alert('不可信任的消息源');
}
setTimeout(function() {
//e.source即主页面的window对象，使用它向主页面发送消息
e.source.postMessage('{"error":false,"msg":""}', e.origin);
}, 2000);
}, false);
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>