父页面与iframe、父页面与子页面的通讯

2022-01-06 23:34:22 阅读：175 来源： 互联网

标签：querySelector win window iframe 与子 document event 页面

父页面与iframe间的通讯

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parent</title>
</head>
<body>
<p>this is parent window</p>
<input type="text" id="parentMsg">
<button id="sendParentMsg">发送信息到iframe</button>
<div class="contents">
    <p>这里会展示收到的信息</p>
</div>
<iframe src="child.html" frameborder="2" id="childIframe" height="500" width="800"></iframe>
<script>
    window.onload =function () {
        {
            let a = 1;

        }
        var b= {x:2,y:3};
        console.log(a);
        console.log(b.x);
        alert(b.y);
    }

    let origin, win;
    // 为父页面绑定message事件，接受来自iframe发送的消息
    window.addEventListener('message', event => {
        console.log(event.origin);
        console.log(event.data);
        console.log(event.source);
        document.querySelector('.contents').innerHTML += `<p> child：${event.data}</p>`;
    });
    // win可以是iframe的引用，也可以是通过通过父页面打开的子页面的window引用，比如子页面是通过window.open打开的，那么win可以是win = window.open(url, '_blank'),这样便可以实现两个tab页之间的通信
    win = document.querySelector('#childIframe').contentWindow;
    document.querySelector('#sendParentMsg').addEventListener('click', () => {
        let parentMsg = document.querySelector('#parentMsg').value.trim();
        if (parentMsg) {
            win.postMessage(parentMsg, '*');
            document.querySelector('#parentMsg').value = '';
        }
    })
</script>
</body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>child</title>
</head>
<body>
    <p>this is iframe page</p>
    <label for="subpageInput"> 请输入信息</label>
    <input type="text" id="subpageInput">
    <button class="sendSubpage">发送信息到父页面</button>
    <div class="contents">
    </div>
</body>
    <script>
        let parentWin, parentOrigin;
        // 监听来自父页面的消息
        window.addEventListener('message', event => {
            parentOrigin = event.origin; // 获取发送方页面的origin，通过判断此属性来识别发送方的身份
            parentWin = event.source; // 获取发送发window对象的引用，可以通过这个对象调用postMessage方法实现父子页面互相通信。
            document.querySelector('.contents').innerHTML += `<p>parent：${event.data}</p>`;
        });
        document.querySelector('.sendSubpage').addEventListener('click', () => {
            let subMessage = document.querySelector('#subpageInput').value.trim();
            console.log(typeof subMessage);
            if (subMessage) {
                // submessage为要发送的信息，'*'为指定某个域接受信息
                parentWin.postMessage(subMessage, '*');
                document.querySelector('#subpageInput').value = '';
            }
        })
    </script>
</html>

效果页面

父页面与新打开页面的互动

parent_.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parent</title>
</head>
<body>
<p>this is parent window</p>
<input type="text" id="parentMsg">
<button id="sendParentMsg">发送信息到iframe</button>
<div class="contents">
    <p>这里会展示收到的信息</p>
</div>
<script>
    let origin, win;
    window.onload =function () {
        win = window.open("child.html","_blank")
    }


    // 为父页面绑定message事件，接受来自iframe发送的消息
    window.addEventListener('message', event => {
        console.log(event.origin);
        console.log(event.data);
        console.log(event.source);
        document.querySelector('.contents').innerHTML += `<p> child：${event.data}</p>`;
    });
    // win可以是iframe的引用，也可以是通过通过父页面打开的子页面的window引用，比如子页面是通过window.open打开的，那么win可以是win = window.open(url, '_blank'),这样便可以实现两个tab页之间的通信
    // win = document.querySelector('#childIframe').contentWindow;
    document.querySelector('#sendParentMsg').addEventListener('click', () => {
        let parentMsg = document.querySelector('#parentMsg').value.trim();
        if (parentMsg) {
            win.postMessage(parentMsg, '*');
            document.querySelector('#parentMsg').value = '';
        }
    })
</script>
</body>
</html>

child.html没有发生变化，这是两个tab页面就可以实现互动了

如图所示

实现过程通过指定的html对象引用 win或者parentWin的postMessage方法来发送消息，对应的html对象中添加message的监听器，用来接收外部发送的消息。

window.addEventListener('message', event => {})

然后就可以实现互动了

标签：querySelector,win,window,iframe,与子,document,event,页面
来源： https://blog.csdn.net/u014104653/article/details/122354936

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

父页面与iframe、父页面与子页面的通讯