实现父子页面传参数

使用iframes实现父子页面传参数

B.html

<button onclick="handleEvent()">向父页面发送信息</button>
<p>子页面</p>
<script>
// 注册消息事件监听，接受子元素给的数据
window.addEventListener('message', (e) => {
console.log(e)
console.log(e.data);
}, false);

function handleEvent() {
// 向父页面发消息
var a ='测试A数据'；
var b ='测试B数据';
window.parent.postMessage(a, '*');
window.parent.postMessage(b, '*');
}

</script>

A.html

<div style="margin-bottom: 20px;">
    <button onclick="handleEvent()">向子页面发送信息</button>
</div>
<iframe src="b.html" id="iframe"></iframe>
<script>
    function handleEvent() {
        // iframe的id
        
        var f = document.getElementById('iframe');
        // 触发子页面的监听事件
        f.contentWindow.postMessage('父页面发的消息', '*');
    }
 
    // 注册消息事件监听，接受子元素给的数据
    window.addEventListener('message', (e) => {
        console.log(e.data);
    }, false);
</script>
 

说明
 
message 将要发送到其他 window的数据。