javascript - JavaScript window.open，将脚本传递给子窗口只能工作一次

Question

我在成功传递脚本时遇到问题，该脚本将第二次在子窗口内自动激活。

let win = undefined;
let win2 = undefined;
let testInterval = setInterval(function(){
    if(win === undefined){
        win = window.open("?");
        win.document.body.appendChild(testScript);
        listenToMessages();
    }else{
        if(win.closed === true){
            win = window.open("?");
            win.document.body.appendChild(testScript);
            listenToMessages();
        }
    }
    if(win2 === undefined){
        win2 = window.open("?");
        win2.document.body.appendChild(testScript);
        listenToMessages();
    }else{
        if(win2.closed === true){
            win2 = window.open("?");
            win2.document.body.appendChild(testScript);
            listenToMessages();
        }
    }
}, 2000);

let testScript = document.createElement('script');
testScript.textContent = 'console.log("here!")';

通过测试这个，您会注意到 DOM 内的两个窗口中都存在 console.log，但该消息仅在第一次写入控制台时。有谁知道为什么会发生这种行为？

提前致谢， 亚历克斯

标签： javascripthtmlwindow.open

Answer 1

一个 DOM 元素一次只能在一个地方。当您附加testScript到win2.document它时，会将其从win.document.

如果您需要元素的多个副本，则script需要克隆它。

let win = undefined;
let win2 = undefined;
let testInterval = setInterval(function() {
  if (!win || win.closed) {
    win = window.open("?");
    if (win) {
      win.document.body.appendChild(testScript);
      listenToMessages();
    } else {
      console.log("Unable to open win");
    }
  }
  if (!win2 || win2.closed) {
    win2 = window.open("?");
    if (win2) {
      let testScript2 = testScript.cloneNode();
      win2.document.body.appendChild(testScript2);
      listenToMessages();
    } else {
      console.log("Unable to open win2");
    }
  }
}, 2000);

let testScript = document.createElement('script');
testScript.textContent = 'console.log("here!")';