postMessage(msg,targetOrigin)
- msg:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，但是并不是所有的浏览器都可以做到这点，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
- targetOrigin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
当postMessage()被调用的时，一个消息事件就会被分发到目标窗口上。该接口有一个message事件，该事件有几个重要的属性：
- data：顾名思义，是传递来的message
- source：发送消息的窗口对象
- origin：发送消息窗口的源（协议+主机+端口号）
这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似。
简单的demo
例：实现如下两个不同域文档之间的通信，
1.主页面：http://mydomain.com/mytest.html
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>Post Message1</title>
</head>
<body>
<div style="width:200px;height:200px; float:left; margin-right:200px;border:solid 1px #333;">
<div id="color">Frame Color</div>
</div>
<div>
<iframe id="child" src="http://yourdomain.com/yourtest.html"></iframe>
</div>
<script type="text/javascript">
window.onload=function(){
window.frames[0].postMessage(‘getcolor‘,‘http://yourdomain.com/‘);
}
window.addEventListener(‘message‘,function(e){
var color=e.data;
document.getElementById(‘color‘).style.backgroundColor=color;
},false);
</script>
</body>
</html>
2.iframe页面：http://yourdomain.com/yourtest.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"> <style type="text/css">
html,body{ height:100%;margin:0px;}
</style>
</head>
<body style="height:100%;">
<div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:red;">
click to change color
</div>
<script type="text/javascript">
var container=document.getElementById(‘container‘);
window.addEventListener(‘message‘,function(e){
if(e.source!=window.parent) return;//判断是否来自http：//mydomain.com/mytest.html窗口对象
var color=container.style.backgroundColor;
window.parent.postMessage(color,‘*‘);
},false);
function changeColor () {
var color=container.style.backgroundColor;
if(color==‘red‘){
color=‘blue‘;
}else{
color=‘red‘;
}
container.style.backgroundColor=color;
window.parent.postMessage(color,‘*‘);
}
</script>
</body>
</html>
增强postMessage通信安全
- 对于包含重要信息的消息，不要砸targetOrigin参数中使用“*”，而应当指定一个域，否则，无法保证消息只发送到了期望的接收处；
- 经常检查origin属性，以确保只接收来自可信任的消息域中的消息；
- 想要更安全的话，可以检查一下收到的数据是否符合预期的格式。
时间： 2024-10-14 00:52:01