关闭父 window 时，事件侦听器无法处理弹出窗口 window

Question

我想让我的打印按钮在弹出 window 上工作，但问题是当我关闭父 window 或在父 window 中的另一个 URL 上导航时=] 然后我的弹出窗口中的打印按钮 window 不起作用。

事件侦听器在弹出窗口中不起作用 window 可能是它们随父 window 一起消失了。

注意：当父 window 存在时它工作正常

下面是我正在使用的代码，请帮助我

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open a new window, and assure that the new window GETS focus (send the new window to the front).</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var myWindow = window.open("", "_blank", "width=200,height=100");
  myWindow.document.write("<p>A new window!</p>");
   var printButton = myWindow.document.createElement('BUTTON');
   var buttonNode = myWindow.document.createTextNode('PRINT');
    printButton.appendChild(buttonNode);
    myWindow.document.body.insertAdjacentHTML('beforeend',             printButton.outerHTML);
   var btn = myWindow.document.querySelector('button');
   btn.addEventListener('click', () => {
    myWindow.window.print();
    });
}
</script>

</body>
</html>

Answer 1

与其使用 addEventListener，不如使用 onclick 属性，这样它就可以持久化。

演示：https://codepen.io/craigiswayne/pen/moYYga

function myFunction() {
  var myWindow = window.open("", "_blank", "width=500,height=500");
  myWindow.document.write("<p>A new window!</p>");

  var printButton = myWindow.document.createElement('BUTTON');
  printButton.innerHTML = "PRINT";
  printButton.setAttribute("onclick", "window.print()");
  myWindow.document.body.appendChild(printButton);
}

<p>Click the button to open a new window, and assure that the new window GETS focus (send the new window to the front).</p>

<button onclick="myFunction()">Try it</button>

您的方法不起作用的原因是，一旦父级更改，就没有对原始事件处理程序的引用。

由于运行代码的 iframe 的沙盒环境，上述代码无法在 Whosebug 上运行。所以我添加了 codepen link 来演示解决方案

关闭父 window 时，事件侦听器无法处理弹出窗口 window

Event listeners are not working on popup window when close it's parent window

html

javascript

window

popup