postMessage 跨文档消息传递_postmessagew的第二个参数-优快云博客

postMessage作用在于解决，来自不同域的页面之间的消息传递，而且稳妥又方便。

假设此时有一个文档A，要向文档B传递消息C，就可在文档A中直接写：

B.postMessage(C, B.domain);

postMessage()方法接收两个参数，第一个为要传递的消息，第二个为消息接收方所处的域。第二个参数的作用在于保障通信安全。即防止把消息发送到不安全的地方。若要把消息发送到来自任何域的文档，可把第二个参数写为 ‘*’ 。

当文档接收到消息，就会触发window对象的message事件，此事件以异步形式触发。比如上面写到的，当文档B收到文档A发来的消息C，即触发message事件，可在文档B中设置事件处理函数来判断。如：

    window.addEventListener('message', function(event){
        //if(event.origin != ''){return;}
        event.source.postMessage('received, data is    '+event.data,'*');
    })

该事件对象event包含三方面的重要信息：

data：作为postMessage()的第一个参数传入的字符串数据；
origin：发送消息的文档所在的域，可用来检测消息来源。
source：发送消息的文档的window对象的代理。注意，因为只是代理，只用它来调用postMessage()就好。

试着写个demo，按下按钮，就可以获取iframe中的背景色并用他修改box的背景色。
A.html

<div id='box' style="width: 100px;height: 100px;background: blue;"></div>
<button id="color">changeColor</button>
<div>
    <iframe src="b.html"></iframe>
</div>
<script type="text/javascript">
    var btn = document.getElementById('color');
    btn.onclick = function(){
        window.frames[0].postMessage('give me the color','*');
    }
    window.addEventListener('message', function(event){
        var box = document.getElementById('box');
        box.style.backgroundColor = event.data;
    })
</script>

B.html

<p id="box" style="width: 100px;height: 100px;background: red;">heiheihei</p>
<script type="text/javascript">
    var box=document.getElementById('box');
    var color = box.style.backgroundColor;
    window.addEventListener('message', function(event){
        //if(event.origin != ''){return;}
        event.source.postMessage(color,'*');
    })
</script>