原创

H5-iframe、parent窗口之间互发消息、通信-postMessage

iframe、parent窗口之间互发消息、通信-postMessage

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            button,
            iframe {
                display: block;
            }
        </style>
    </head>

    <body>
        <button id="btnInParent1">向指定iframe1中发送</button>
        <button id="btnInParent2">向指定iframe2中发送</button>
        <iframe id="iframe111" src="crossOriginIframe.html"></iframe>
        <iframe id="iframe2" src="crossOriginIframe2.html"></iframe>
    </body>
    <pre>
        总结:
        1. 向iframe中发送消息，不能少contentWindow，即iframe1.contentWindow.postMessage
        2. iframe向parent中发送消息，window.parent.frames.postMessage
        2. iframe向iframe中发送消息，window.parent.frames["iframe111"].contentWindow.postMessage （iframe111是parent中的iframe的id）
    </pre>
    <script type="text/javascript">
        var MESSAGE_TYPE__OPEN_WINDOW = 'OpenWindow';
        var MESSAGE_TYPE__CHANGE_TITLE = 'ChangeTitle';
        var MESSAGE_TYPE__GET_USER = 'GetUser';

        var iframe1 = document.getElementById('iframe111');
        var iframe2 = document.getElementById('iframe2');

        window.addEventListener('message', function(event) {
            if(!event.data) return;
            var data = event.data;
            if(data.type === MESSAGE_TYPE__OPEN_WINDOW) {
                window.open(data.data);
                return;
            }
            if(data.type === MESSAGE_TYPE__CHANGE_TITLE) {
                window.document.title = data.data;
                console.log("parent接收到iframe中的消息：" + data.data)
                return;
            }
            if(data.type === MESSAGE_TYPE__GET_USER) {
                //iframe1.contentWindow.postMessage这里可以向iframe中发送消息，（相当于中转）
            }
        });
        document.getElementById("btnInParent1").addEventListener('click', function() {
            iframe1.contentWindow.postMessage({
                type: MESSAGE_TYPE__GET_USER,
                data: "userName1",
            }, '*');
        });
        document.getElementById("btnInParent2").addEventListener('click', function() {
            iframe2.contentWindow.postMessage({
                type: MESSAGE_TYPE__GET_USER,
                data: "userName2",
            }, '*');
        });
    </script>

</html>

crossOriginIframe.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div>iframe1</div>
        <button id="btnInIframe1">iframe1向parent发送消息</button>
        <script>
            var btnInIframe1 = document.getElementById("btnInIframe1");
            btnInIframe1.addEventListener("click", function() {
                window.parent.frames.postMessage({
                    type: "ChangeTitle",
                    data: "我是frame1中发出的title"
                }, "*");
            });

            window.addEventListener('message', function(event) {
                if(!event.data) return;
                var data = event.data;
                if(data.type === "GetUser") {
                    console.log("通过iframe的id对象向该对象发送内容给iframe1：iframe1中接收到：" + data.data);
                }
                if(data.type === "iframeMsg") {
                    console.log("iframe之间的消息发送：iframe1中接收到：" + data.data);
                }
            });
        </script>
    </body>

</html>

crossOriginIframe2.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div>iframe2</div>
        <button id="btnInIframe2">iframe2向iframe1发送消息【可能需要中转】</button>
        <script>
            var btnInIframe2 = document.getElementById("btnInIframe2");
            btnInIframe2.addEventListener("click", function() {
                //console.log(window.parent.frames);
                window.parent.frames["iframe111"].contentWindow.postMessage({ // iframe111是parent中的iframe的id
                    type: "iframeMsg",
                    data: "我是从iframe2向iframe1发出的消息"
                }, "*");
            });

            window.addEventListener('message', function(event) {
                if(!event.data) return;
                var data = event.data;
                if(data.type === "GetUser") {
                    console.log("通过iframe的id对象向该对象发送内容给iframe2：iframe2中接收到：" + data.data);
                }
            });
        </script>
    </body>

</html>

具体demo见附件

附件下载：H5-iframe、parent窗口之间互发消息、通信-postMessage.rar

正文到此结束

所属分类：前端技术

本文标签： 前端 JavaScript
本文链接： https://code.jiangjiesheng.cn/article/110
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

H5-iframe、parent窗口之间互发消息、通信-postMessage

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息