使用postMessage实现跨窗口消息传递

检测浏览器支持

不同版本的浏览器对postMessage的支持可能不同，因此使用前需要检测。在chrome浏览器中的一种比较简单的方法就是直接在开发者工具中输入window.postMessage,如果结果如下，说明支持

使用postMessage 发送消息

postMessage的语法 :window.postMessage(data,url)

data:发送的消息，通常为字符串
url:指定允许通信的域名。注意，不是接受消息的目标域名。使用该参数的主要作用是出于安全考虑，接受消息的窗口可以根据此消息来判断信息来源是否可靠，避免恶意攻击。如果不对访问的域进行判断可以使用‘*’。

跨窗口消息传递实例

1.目标：使用框架实现左边发送消息，右边显示发送的消息

2.效果图：

3.代码实现

1）index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨框架发送消息</title>
</head>
<frameset framespacing="1" border="1" bordercolor=#333339 frameborder="yes">
<frameset cols="500,*">
<frame name="left" target="main" src="left.html" scrolling="auto" frameborder="1"></frame>
<frame name="right" src="right.html" scrolling="auto" noresize frameborder="1"></frame>
</frameset>
<noframes>
<body>
<p>您的浏览器不支持框架</p>
</body>
</noframes>
</frameset>
</html>

主页面布局比较简单，主要是使用了frame框架，引入左右两个html文件

2）left.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
<script type="text/javascript">
//程序首先获取文本框的内容，然后使用右侧框架窗口对象调用postMessage（）向右侧框架发送消息
function send(){
var message=document.querySelector("input[type = 'text']").value;
window.parent.frames[1].postMessage(message,'*');
//window.parent.pastMessage用于向父窗口发送消息，frames[1]表示要发送的框架，*表示不对访问的域进行判断
}
</script>
</head>
<body>
<p>这是框架的左部,点击发送消息</p>
<form>
<input type="text" required autofocus></input>
<input type="button" value="发送" onclick="send()"></input>
</form>
</body>
</html>

left.html的布局也是很简单的，就一个输入框和发送按钮，主要是调用了window.parent.postMessage向父窗口传递消息

3）right.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<p>这是框架的右部,用于接收来自左侧的消息</p>
<div id="message"></div>
</body>
<script type="text/javascript">
var elebox = document.querySelector("#message");
//事件处理函数
//e.data是接受到的数据
//e.origin是传送源，如果postMessage（）第二个参数为*则返回undefined。
//可以根据e.origin的值来判断是否为安全的源
var messageHandle=function(e){
elebox.innerHTML += e.data+"<br>";
}; 
//监听postMessage发送的消息事件，并对其中包含的数据进行处理。
if(window.addEventListener){
window.addEventListener("message",messageHandle,false);
}else if(window.attachEvent){
window.attachEvent("onmessage",messageHandle);
}
</script>
</html>

right.html主要是接受消息的，需要监听消息事件，并处理。

如果使用addEventListener方法，则需要监听message事件

window.addEventListener("message",messageHandle,false);

如果使用attachEvent方法，则需要监听onmessage事件

window.attachEvent("onmessage",messageHandle);

来源：oschina

链接：https://my.oschina.net/u/2440934/blog/663685

标签

html5

postmessage