使用window.open实现父子页面通信偶现传值失败问题求助

你遇到的这个间歇性获取不到msg对象的问题，核心原因是子页面的加载时机和父页面赋值操作的时机不匹配：

当你调用window.open('./child.html')时，浏览器会异步加载子页面。如果子页面的脚本（也就是child.html里读取window.msg的代码）先执行了，而父页面还没来得及给childWindow.msg赋值，这时候子页面就会拿不到数据；反之如果父页面的赋值操作比子页面脚本执行快，就能正常获取到。这种时机差异就是导致问题时好时坏的根本原因。

下面提供几种可靠的解决方法，按推荐程度排序：

方法1：通过window.postMessage传递数据（最推荐） #

这是浏览器提供的安全、可靠的跨页面通信方式，完全不受页面加载时机的影响：

修改index.html的脚本： #

<script>
    const msg = { name:'index.html', ifor:'I am your parent!' };
    function onBtnClick() {
        const childWindow = window.open('./child.html');
        // 监听子页面加载完成事件，确保子页面就绪后再发消息
        childWindow.addEventListener('load', () => {
            childWindow.postMessage(msg, window.location.origin);
        });
    }
</script>

修改child.html的脚本： #

<script>
    const msgPanel = document.querySelector('#msg-panel');
    // 监听父页面发来的消息
    window.addEventListener('message', (event) => {
        // 验证消息来源，避免接收恶意网站的消息
        if (event.origin === window.location.origin) {
            const msg = event.data;
            msgPanel.innerHTML = `<span>${msg.name}</span><br><span>${msg.ifor}</span>`;
            console.log(msg);
        }
    });
</script>

方法2：等待子页面加载完成后再赋值 #

通过监听子页面的load事件，确保子页面完全加载后再给msg赋值，同时让子页面在自身加载完成后读取数据：

修改index.html的脚本： #

<script>
    const msg = { name:'index.html', ifor:'I am your parent!' };
    function onBtnClick() {
        const childWindow = window.open('./child.html');
        childWindow.addEventListener('load', () => {
            childWindow.msg = msg;
        });
    }
</script>

修改child.html的脚本： #

<script>
    const msgPanel = document.querySelector('#msg-panel');
    // 等自身加载完成后再读取父页面传递的msg
    window.addEventListener('load', () => {
        if (window.msg) {
            msgPanel.innerHTML = `<span>${window.msg.name}</span><br><span>${window.msg.ifor}</span>`;
            console.log(window.msg);
        }
    });
</script>

方法3：通过URL参数传递（适合简单数据） #

如果你的msg是可序列化的简单数据，可以把它转成JSON后放在URL参数里传递，这种方式不需要依赖页面加载时机：

修改index.html的脚本： #

<script>
    const msg = { name:'index.html', ifor:'I am your parent!' };
    function onBtnClick() {
        const msgStr = encodeURIComponent(JSON.stringify(msg));
        window.open(`./child.html?msg=${msgStr}`);
    }
</script>

修改child.html的脚本： #

<script>
    const msgPanel = document.querySelector('#msg-panel');
    // 从URL参数中解析数据
    const urlParams = new URLSearchParams(window.location.search);
    const msgStr = urlParams.get('msg');
    if (msgStr) {
        const msg = JSON.parse(decodeURIComponent(msgStr));
        msgPanel.innerHTML = `<span>${msg.name}</span><br><span>${msg.ifor}</span>`;
        console.log(msg);
    }
</script>

最推荐使用postMessage的方式，它不仅能彻底解决加载时机的问题，还支持传递复杂数据，同时能通过origin验证保证通信安全。另外两种方法也能解决问题，但各有适用场景：等待加载事件适合同域下的简单数据传递，URL参数适合数据量小、可序列化的情况。

内容的提问来源于stack exchange，提问作者webber