Html5 postMessage

解释：跨文档消息传输Cross Document Messaging。

编写代码前注意判断浏览器是否支持Html5

实例： b页面向a页面发送消息。

<!DOCTYPE>
<html>
<head>
    <title></title>
</head>
<body>
    我是b页面
</body>
<script type="text/javascript">
    setTimeout(function () {
        var oParent = window.parent;
        //第一个参数 发送消息(如果是json格式序列化字符串发送)
        //第2个参数  发送消息目的地 注意页面之间要有window关系 
        oParent.postMessage("hello world!", "http://localhost:4686/a.htm");
    }, 1000);
</script>
</html>

<!DOCTYPE>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var messageChange = function (e) {
            var data = e.data;
            var origin = e.origin;
            document.getElementById('display').innerHTML = data;
        }

        //google 或者ie方式注册事件
        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', messageChange, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', messageChange);
        }  
    </script>
</head>
<body>
    <div id="display"></div>
    <iframe src="b.htm"></iframe>
</body>
</html>

运行结果：

其中hello world是b页面发送过来的。

注意事项：

Syntax

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

 reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open, or by named or numeric index on window.frames.messageData to be sent to the other window

.targetOrigin

Specifies what the origin of otherWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if postMessage were used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site

.transfer 

OptionalIs a sequence of Transferable objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no more usable on the sending side.

关于window.addEventListener window.attachEvent的解释

火狐或者google

addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target：文档节点、document、window 或 XMLHttpRequest。

type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。

listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

useCapture ：是否使用捕捉，一般用 false 。

target.attachEvent(type, listener);

target：文档节点、document、window 或 XMLHttpRequest。

type：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

移除：用什么样的方式绑定就用对应的方式解除

removeEventListener(event,function,capture/bubble);

event：比如单击，或双击．或移动鼠标事件等．

function:要被注销的事件名称，函数名．

capture/bubble:布尔值．true或false.true代表支持事件冒泡．false则不支持事件冒泡捕获

Windows IE的格式如下:

detachEvent(event,function);

参数参考上面。

注意：在使用removeEventListener()函数时，参数 function函数，必须和使用addEventListener()里面的 function函数必须相同。

同理IE的也一样。