Используйте 'window.open' и общайтесь с дочерним окном - PullRequest
Новая
       11

Используйте 'window.open' и общайтесь с дочерним окном

0 голосов
/ 24 мая 2018

На моем сервере 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>

Я хочу передать некоторое сообщение (объект msg в index.html) из index.html в child.html , как описано выше.

Когда я нажимаю кнопку в index.html , чтобы открыть child.html , иногда я могу получить объект msg в child.html , но иногда яне может.

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

  • сделать кнопку type = "button"

  • вы установите сообщение после открытия.Иногда компьютер будет работать быстрее и не пропустит сообщение до его показа.Используйте тайм-аут, чтобы показать сообщение в дочернем элементе ИЛИ

    • сохранить сообщение в sessionStorage перед вызовом window.open ИЛИ
    • пусть ребенок прочитает сообщение от родителя: 
const msgPanel = document.querySelector('#msg-panel');
msgPanel.innerHTML = `<span>${opener.msg.name}</span><br><span>${opener.msg.ifor}</span>`
  console.log(window.msg);
0 голосов
/ 24 мая 2018

Хотя это уже решено.Другой альтернативой для отправки данных ребенку будет localstorage.Получение и настройка очень просты, и IE11 также поддерживается. 

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

При этом вы также сможете отправлять данные туда и обратно, устанавливая прослушиватели событий для события изменения локального хранилища, например

* 1006.*

На всякий случай, если вы хотите более сложный обмен между родителем и ребенком.

0 голосов
/ 24 мая 2018

Потому что вы иногда получаете это сообщение, а иногда не пытаетесь вставить код из скрипта из index.html в это: 

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

Я думаю, ваш HTML не загружен, и вы слишком быстро нажимаете кнопку.

...