检测浏览器支持

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

使用postMessage 发送消息

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

• data:发送的消息，通常为字符串

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

跨窗口消息传递实例

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

    2.效果图：

3.代码实现

1）index.html

    
     
     
      
       
        
         <div></div>          &lt;body&gt;&lt;p&gt;您的浏览器不支持框架&lt;/p&gt;&lt;/body&gt;<div></div>         
        
       
      
     
    

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

2）left.html

    
     
     
      //程序首先获取文本框的内容，然后使用右侧框架窗口对象调用postMessage（）向右侧框架发送消息function send(){var message=document.querySelector("input[type = 'text']").value;window.parent.frames[1].postMessage(message,'*');//window.parent.pastMessage用于向父窗口发送消息，frames[1]表示要发送的框架，*表示不对访问的域进行判断}
      
这是框架的左部,点击发送消息
      
       
        
       
      
     
    

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

3）right.html

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

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

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

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

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

window.attachEvent("onmessage",messageHandle);