标签：
msg:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，但是并不是所有的浏览器都可以做到这点，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
targetOrigin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
当postMessage()被调用的时，一个消息事件就会被分发到目标窗口上。该接口有一个message事件，该事件有几个重要的属性：
这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似。
简单的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通信安全
标签：
原文地址：http://www.cnblogs.com/zhangmener/p/4552415.html
