使用 'window.open' 并与 child window 交流

Question

我的 tomcat 服务器中有两个页面。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="onBtnClick()">jump to child</button>
<script>
    const msg = {
        name:'index.html',
        ifor:'I am your parent!'
    };
    function onBtnClick() {
        const childWindow = window.open('./child.html');
        childWindow.msg = msg
    }
</script>
</body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="msg-panel"></div>
<script>
    const msgPanel = document.querySelector('#msg-panel');
    msgPanel.innerHTML = `<span>${msg.name}</span><br><span>${msg.ifor}</span>`
    console.log(window.msg);
</script>
</body>
</html>

我想从index.html传递一些消息（index.html中的消息Object）到child.html, 顺便说一下上面的.

当我点击index.html中的按钮打开child.html时，有时我可以得到msg object in child.html，但有时我不能。

Answer 1

因为您有时会收到该消息，有时不会尝试将来自 index.html 的脚本代码放入此：

document.addEventListener("DOMContentLoaded", function(event) {
       //your code...
}

我认为你的 html 没有加载，你点击按钮的速度太快了。

Answer 2

制作按钮类型="button"
您设置打开后的消息。有时计算机会更快，并且在消息显示之前不会传递消息。使用超时在 child 或
- 在调用 window.open 或
- 让 child 阅读来自 parent 的消息：

const msgPanel = document.querySelector('#msg-panel');
msgPanel.innerHTML = `<span>${opener.msg.name}</span><br><span>${opener.msg.ifor}</span>`
  console.log(window.msg);

Answer 3

虽然这已经解决了。将数据发送到 child 的另一种选择是 localstorage。获取和设置非常简单，也支持IE11。

localStorage.setItem('msg', 'something important');
let msg = localStorage.getItem('msg');

有了它，您还可以通过在本地存储更改事件上设置事件侦听器来回发送数据，例如

window.addEventListener('storage', function(e) {
    //do some cool stuff here
}

以防万一你想在 parent 和 child 之间进行更复杂的交换。

使用 'window.open' 并与 child window 交流

Use 'window.open' and communicate with a child window

html

javascript

window.open

web