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

2023-10-03 20:39:34

父页面与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 => {})

然后就可以实现互动了

码农公寓

相关文章