postMessage使用测试

1. 父页面

<html>
<head>
    <meta charset="gbk">
    <title>引用页面</title>
</head>
<body>
<button id='openNewWindow'>弹出新窗口</button>
<button id='sendMessage'>发送消息</button>
<input id='message' value='0'>
<iframe id='childWindow' src="test03-2.html"></iframe>
<script type="text/javascript">
    var childWindow = document.getElementById('childWindow');
    openNewWindow.onclick = function(){
        window.w=window.open('test03-2.html');
    }
    window.onmessage=function(e){
        console.log(e);
        message.value = +message.value + 1;
    };
    sendMessage.onclick = function(){
        w.postMessage({sendby: 1, m: 'test'}, '*');
        childWindow.contentWindow.postMessage({sendby: 1, m: 'test'}, '*');
    };
</script>
</body>
</html>

2. 子页面

<html>
<head>
    <meta charset="gbk">
    <title>被引用页面</title>
</head>
<body>
    <button id='sendMessage'>发送消息</button>
    <input id='message' value='0'>
<script type="text/javascript">
    parent.onmessage=function(e){
        console.log(e);
        message.value = +message.value + 1;
    };
    window.onmessage=function(e){
        console.log(e);
        message.value = +message.value + 1;
    };
    sendMessage.onclick = function(){
        parent.postMessage({sendby: 2, m: 'test'}, '*');
    };
</script>
</body>
</html>

tips：iframe引入的页面，可以相互通信；window.open打开的页面只能父页面向子页面发消息。

posted @ 2013-06-18 15:22  snadn  阅读(1227)  评论(0)  编辑  收藏  举报