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中的msg对象）从 index.html 传递到 child.html 。

当我点击 index.html 中的按钮打开 child.html 时，有时我可以在 child.html ，但有时候我不能。

Answer 1

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

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

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

Answer 2

按下按钮类型=＆＃34;按钮＆＃34;
打开后设置信息。有时计算机会更快，并且在显示之前不会传递消息。使用超时在子OR中显示消息
- 在调用window.open OR
- 让孩子从父母那里读取消息：

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

虽然这已经解决了。向儿童发送数据的另一种方法是localstorage。获取和设置非常简单，IE11也受支持。

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

通过这种方式，你还可以通过在localstorage change事件上设置事件监听器来来回发送数据，如

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

以防万一你希望在父母和孩子之间进行更复杂的交流。

使用'window.open'并与子窗口通信

3 个答案: