Question

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

事件监听器在弹出窗口中不起作用，可能是因为它们与父窗口一起消失了。

注意：当父窗口在那里时，它工作正常

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

<!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的沙盒环境，以上代码在StackOverflow上不起作用。所以我添加了codepen链接来演示解决方案

关闭弹出窗口的父窗口时，事件监听器无法在弹出窗口上工作

1 个答案: