跨文档消息通信 HTML5

最新推荐文章于 2021-06-03 08:39:25 发布

珊瑚贝

最新推荐文章于 2021-06-03 08:39:25 发布

阅读量230

点赞数 1

分类专栏：编程开发

本文链接：https://blog.csdn.net/chenzhao635/article/details/104169864

版权

编程开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

使用postMessageAPI

要想接受从其他的窗口那里发过来的信息，就必须对窗口对象的message时
间进行监视，代码如下所示。
window.addEventListener("message",function(){...},false);
使用window对象的postMessage方法向其他窗口发送信息，该方法的定义
如下所示。
otherWindow.postMessage(message,targetOrigin);
该方法使用两个参数；第一个参数为所发送的消息文本，但也可以是任何
javascript对象（通过JSON转换对象为文本）；第二个参数为接收信息的对象
窗口的URL地址（例如http://localhost:8080/）。可以在URL地址字符串中
使用通配符“*”指定全部地址，不过，建议使用准确的URL地址。otherWindow为要发送窗口对象的引用，可以通过window.open返回该对
象，或通过对window.iframes数组指定序号（index）或名字的方式来返回单
个iframe所属的窗口对象。
主index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域通信示例</title>
<script type="text/javascript">
// 监听message事件
window.addEventListener("message", function(ev) {
  	//忽略指定URL地址之外的页面传过来的消息
  	//if(ev.origin != "http://127.0.0.1:8848") {
    //	return;
  	//}
  	//显示消息
  	alert("从" ev.origin   "那里传过来的消息:\n\""   ev.data   "\"");
}, false);
function hello(){
	var iframe = window.frames[0];
  	//传递消息
  	iframe.postMessage("您好！", "http://127.0.0.1:8848");
}
</script>
</head>
<body>
<h1>跨域通信示例</h1>
<iframe width="400" src="http://127.0.0.1:8848/iframe.html" οnlοad="hello()">
</iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.addEventListener("message", function(ev){
	if(ev.origin != "http://127.0.0.1:8848"){
		return;
	}
    document.body.innerHTML = "从" ev.origin   "那里传来的消息。<br>\""  ev.data   "\"";
    //向主页面发送消息
    ev.source.postMessage("珊瑚贝欢迎您！这里是"   this.location, ev.origin);
}, false);
</script>
</head>
<body></body>
</html>

珊瑚贝

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨文档消息通信 HTML5

使用postMessageAPI要想接受从其他的窗口那里发过来的信息，就必须对窗口对象的message时间进行监视，代码如下所示。window.addEventListener("message",function(){...},false);使用window对象的postMessage方法向其他窗口发送信息，该方法的定义如下所示。otherWindow.post...
复制链接

扫一扫