时间戳

首页 > 解决方案 > 弹出窗口 JavaScript

javascript - 弹出窗口 JavaScript

问题描述

我一直在使用 JavaScript 弹出窗口，当我触发它们打开时，这些窗口没有保存为变量

这是我的代码


function trig(){var pwin = window.open('https://stackoverflow.com/questions/68612238/popup-window-javascript','popUpWindow','height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes');document.querySelector('body').setAttribute('onclick', 'pwin.close()')};
<div onclick="trig()">Click here</div>



这是一个外部链接，在单击“单击此处”按钮后尝试它
应该显示一个窗口，但我发现它没有将其保存为变量。然后在用户按下<body>元素后，窗口应该关闭

无法调试任何问题。

标签： javascripthtml

解决方案

pwin未在全局范围内声明。您应该改为close()在函数内部调用该方法。

function trig() {
  var pwin = window.open('https://stackoverflow.com/questions/68612238/popup-window-javascript', 'popUpWindow', 'height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes');
  document.querySelector('body').addEventListener('click', () => pwin.close());
};

它立即关闭，因为当您单击“单击此处”按钮打开窗口时，在事件完成触发click之前添加了事件侦听器click，因此它立即关闭。

相反，使用setTimeout在 50 毫秒后添加事件侦听器：

function trig() {
  var pwin = window.open('https://stackoverflow.com/questions/68612238/popup-window-javascript', 'popUpWindow', 'height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes');
  setTimeout(()=>{document.querySelector('body').addEventListener('click', () => pwin.close());}, 50);
};

推荐阅读