使用postMessage实现跨域文档通信

最新推荐文章于 2024-09-18 16:17:32 发布

weixin_30417487

最新推荐文章于 2024-09-18 16:17:32 发布

阅读量112

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zhangmener/p/4552415.html

版权

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.οnlοad=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" οnclick="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通信安全