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

时间 2019-11-07

标签使用 postmessage 实现窗口消息传递繁體版

原文原文链接

检测浏览器支持javascript

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

使用postMessage 发送消息java

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

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);