技术联盟

window postMessage使用Demo

使用window.open进行postmessage处理

打开新页面和监听界面的界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    我是监听界面
<body>
    <script>

        window.onload = function(){
            console.log("onload finish");
            if(window.addEventListener){
                console.log("onload addEventListener");
                window.addEventListener('message', function (e) {
                    console.log("addEventListener我监听到了");
                    // if (e.data.act == 'response') {
                    //     alert(e.data.msg.answer);
                    // } else {
                    //     alert('未定义的消息: ' + e.data.act);
                    // }
                    console.log(e.data);
                });
            }else{
                window.attachEvent('onmessage', function (e) {
                    console.log("attachEvent我监听到了");
                    // if (e.data.act == 'response') {
                    //     alert(e.data.msg.answer);
                    // } else {
                    //     alert('未定义的消息: ' + e.data.act);
                    // }
                    console.log(e.data);
                });
            }
        }

        var popup =  window.open("indexopen.html");
        popup.onload = function(){
            // popup.postMessage("hello there!", "*");
            console.log("popup 设置监听");
            popup.addEventListener('message', function (e) {
                    console.log("popup addEventListener我监听到了");
                    console.log(e.data);
                },false);
            popup.mydataFunction = function(){
                console.log("自定义的函数!");
            }
        }
      
    </script>
</body>

</html>

子界面及发送postmessage界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是发送界面
    <button id="sendmsg" onclick="sendMsg()">发送监听</button>
    <script>
        var targetPost;
        function sendMsg(){
            console.log("我来发送");
            window.postMessage({
                act: 'myresponse',
                msg:{
                    name:'zhang'
                }
            },"*");
            window.postMessage({
          	act: 'response',
          	msg: {
                type:'EOPEN_NOMAL_AGREE_2.0_PC',
          	    answer: '成功'
          	}
          	}, '*');
            mydataFunction();
        }
        document.onreadystatechange = function(e){
            if(document.readyState == 'complete'){
                window.addEventListener('message',function(event){
                    console.log("index openheml addevent is run");
                    console.log(event.origin);
                    console.log(event.data);
                    console.log(event);
                },false);
            }
        }
        // document.onreadystatechange = function(e) {
        //     if (document.readyState === 'complete') {
        //         window.addEventListener('message', receiveMessage, false);
        //     }
        // };

        // function receiveMessage(event) {
           
        //     if (event.origin !== "http://127.0.0.1:5500/indexopen.html") {
        //         return;
        //     }
        //     console.log('message', event.data);
        //     console.log('origin', event.source);
        //     targetPost = event;
        //     // document.write(event.data);
           
        //     // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把enent.source
        //     // 作为回信的对象,并且把event.origin作为targetOrigin
        //     // event.source.postMessage("hi there yourself!  the secret response " + "is: rheeeeet!", event.origin);
        // }
    </script>
</body>
</html>

使用iframe打开界面进行postmessage

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    我是监听界面
    <iframe src="index.html"></iframe>
<body>
    <script>
        window.onload = function(){
            console.log("onload finish");
            if(window.addEventListener){
                console.log("onload addEventListener");
                window.addEventListener('message', function (e) {
                    console.log("addEventListener我监听到了");
                    // if (e.data.act == 'response') {
                    //     alert(e.data.msg.answer);
                    // } else {
                    //     alert('未定义的消息: ' + e.data.act);
                    // }
                    console.log(e.data);
                });
            }else{
                window.attachEvent('onmessage', function (e) {
                    console.log("attachEvent我监听到了");
                    // if (e.data.act == 'response') {
                    //     alert(e.data.msg.answer);
                    // } else {
                    //     alert('未定义的消息: ' + e.data.act);
                    // }
                    console.log(e.data);
                });
            }
        }
      
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是发送界面
    <button id="sendmsg" onclick="sendMsg()">发送监听</button>
    <script>
        function sendMsg(){
            console.log("我来发送");
            window.parent.postMessage({
                act: 'myresponse',
                msg:{
                    name:'zhang'
                }
            },"*");
            window.parent.postMessage({
          	act: 'response',
          	msg: {
                type:'EOPEN_NOMAL_AGREE_2.0_PC',
          	    answer: '成功'
          	}
          	}, '*');
        }
    </script>
</body>
</html>

Share this:

码字很辛苦,转载请注明来自技术联盟《window postMessage使用Demo》

评论