是否可以使用 javascript 打开弹出窗口,然后检测用户何时关闭它?

IT技术 javascript jquery popup
2021-01-25 22:55:02

问题几乎都在标题中。

是否有可能(以及如何?)使用 javascript 打开弹出窗口,然后检测用户何时关闭它?

我在项目中使用 jquery,所以 jquery 解决方案会很好。干杯!

6个回答

如果您可以控制弹出窗口的内容,请在unload那里处理窗口的事件并通过opener属性通知原始窗口,首先检查打开程序是否已关闭。请注意,这在 Opera 中并不总是有效。

window.onunload = function() {
    var win = window.opener;
    if (!win.closed) {
        win.someFunctionToCallWhenPopUpCloses();
    }
};

由于unload每当用户离开弹出窗口中的页面时都会触发事件,而不仅仅是在窗口关闭时,您应该检查弹出窗口是否实际关闭someFunctionToCallWhenPopUpCloses

var popUp = window.open("popup.html", "thePopUp", "");
function someFunctionToCallWhenPopUpCloses() {
    window.setTimeout(function() {
        if (popUp.closed) {
            alert("Pop-up definitely closed");
        }
    }, 1);
}

如果您无法控制弹出窗口的内容,或者您​​的目标浏览器之一不支持该unload事件,则您只能在主窗口中使用某种轮询解决方案。调整间隔以适应。

var win = window.open("popup.html", "thePopUp", "");
var pollTimer = window.setInterval(function() {
    if (win.closed !== false) { // !== is required for compatibility with Opera
        window.clearInterval(pollTimer);
        someFunctionToCallWhenPopUpCloses();
    }
}, 200);
@JonathonHill:同意。我在回答的前面提到了 Opera 问题,但我应该更清楚地说明这一点。感谢您的编辑。顺便说一句,window.closed !== false在 Opera 中要求的原因是什么?
2021-03-17 22:55:02
这是 Opera 中错误的解决方法。我是从opera-bugs.jottit.com 上发现的
2021-03-18 22:55:02
@JonathonHill:是的,我阅读了该页面。我希望了解更多细节。别着急,我会查的。
2021-03-25 22:55:02
我推荐轮询解决方案而不是unload事件,因为它与更多浏览器兼容(请参阅opera-bugs.jottit.com)。
2021-03-28 22:55:02
在任何情况下,如果使用轮询选项,一定不要忘记window.clearInterval()调用。如果不包括,原页面将继续轮询……一遍又一遍……
2021-04-07 22:55:02

您的问题有一个非常简单的解决方案。

首先创建一个新对象,它将像这样打开一个弹出窗口:

var winObj = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');

为了知道此弹出窗口何时关闭,您只需使用如下循环继续检查:

var loop = setInterval(function() {   
    if(winObj.closed) {  
        clearInterval(loop);  
        alert('closed');  
    }  
}, 1000); 

现在您可以用您想要的任何 javascript 代码替换警报。

玩得开心!:)

尝试查看unloadbeforeunload窗口事件。监视这些应该让您有机会在窗口关闭时通过以下方式在 DOM 卸载时回调:

var newWin = window.open('/some/url');
newWin.onunload = function(){
  // DOM unloaded, so the window is likely closed.
}
这将无法跨浏览器工作。您需要处理unload弹出窗口中事件。
2021-03-14 22:55:02
每个新请求都会触发卸载,而不仅仅是在窗口关闭时。
2021-03-18 22:55:02
谢谢 ajm 看起来很棒。无论如何有机会获得弹出窗口的网址吗?
2021-03-29 22:55:02
是的,YMMV 带卸载。很可能,您需要结合使用 unload 和 beforeunload 来覆盖 IE。@Josh - 每当子窗口的 Document 独立于请求从浏览器卸载时,卸载应该触发;你看到了什么行为?
2021-04-02 22:55:02
例如,如果弹出窗口中有超链接,单击它们将触发unload
2021-04-10 22:55:02

如果您可以使用jQuery UI Dialog,它实际上有一个close事件。

而且,就 JavaScript 而言,jQuery 从来都不是问题的真正解决方案,但通常是解决问题的巨大、巨大、巨大的捷径,无论它是什么。您可以通过走风景路线了解更多信息,但是,在很多情况下,我和大多数人更喜欢 (huge, HUGE, HUGE ) jQuery 快捷方式。
2021-03-29 22:55:02
真的,真的。我应该用“如果”这个词作为我的答案,就像“如果你可以使用 jQuery UI 对话框”一样,而不仅仅是假设它是可能的。嘿!等一等...
2021-03-31 22:55:02
jQuery 不是所有问题的解决方案:)。
2021-04-07 22:55:02

要打开一个新窗口调用:

var wnd = window.open("file.html", "youruniqueid", "width=400, height=300");

如果您只想知道该窗口何时关闭,请使用onunload.

wnd.onunload = function(){
    // do something
};

如果您想在关闭它之前得到用户的确认,请使用onbeforeunload.

wnd.onbeforeunload = function(){
    return "are you sure?";
};
这将无法跨浏览器工作。您需要处理unload弹出文档中事件。
2021-03-22 22:55:02
每个新请求都会触发卸载,而不仅仅是在窗口关闭时。
2021-03-28 22:55:02