是否可以使用 javascript 打开弹出窗口,然后检测用户何时关闭它?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3291712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is it possible to open a popup with javascript and then detect when the user closes it?
提问by Pablo
The question is pretty much all in the title.
问题几乎都在标题中。
Is it possible (and how?) to open a popup with javascript and then detect when the user closes it?
是否有可能(以及如何?)使用 javascript 打开弹出窗口,然后检测用户何时关闭它?
I am using jquery within the project so a jquery solution would be good. Cheers!
我在项目中使用 jquery,所以 jquery 解决方案会很好。干杯!
回答by Tim Down
If you have control over the contents of the pop-up, handle the window's unloadevent there and notify the original window via the openerproperty, checking first whether the opener has been closed. Note this won't always work in Opera.
如果您可以控制弹出窗口的内容,请在unload那里处理窗口的事件并通过opener属性通知原始窗口,首先检查打开程序是否已关闭。请注意,这在 Opera 中并不总是有效。
window.onunload = function() {
var win = window.opener;
if (!win.closed) {
win.someFunctionToCallWhenPopUpCloses();
}
};
Since the unloadevent will fire whenever the user navigates away from the page in the pop-up and not just when the window is closed, you should check that the pop-up has actually closed in someFunctionToCallWhenPopUpCloses:
由于该unload事件会在用户离开弹出窗口中的页面时触发,而不仅仅是在窗口关闭时触发,因此您应该检查弹出窗口是否已实际关闭someFunctionToCallWhenPopUpCloses:
var popUp = window.open("popup.html", "thePopUp", "");
function someFunctionToCallWhenPopUpCloses() {
window.setTimeout(function() {
if (popUp.closed) {
alert("Pop-up definitely closed");
}
}, 1);
}
If you don't have control over the contents of the pop-up, or if one of your target browsers does not support the unloadevent, you're reduced to some kind of polling solution in the main window. Adjust interval to suit.
如果您无法控制弹出窗口的内容,或者您的目标浏览器之一不支持该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);
回答by Kshitij Mittal
There is a very simple solution to your problem.
您的问题有一个非常简单的解决方案。
First make a new object which will open up a pop like this :
首先创建一个新对象,它将像这样打开一个弹出窗口:
var winObj = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');
In order to know when this popup window is closed, you just have to keep checking this with a loop like the following :
为了知道此弹出窗口何时关闭,您只需使用如下循环继续检查:
var loop = setInterval(function() {
if(winObj.closed) {
clearInterval(loop);
alert('closed');
}
}, 1000);
Now you can replace alert with any javascript code you want.
现在你可以用你想要的任何 javascript 代码替换警报。
Have Fun! :)
玩得开心!:)
回答by ajm
Try looking into the unloadand beforeunloadwindow events. Monitoring these should give you an opportunity to call back when the DOM unloads when the window is closed via something like this:
尝试查看unload和beforeunload窗口事件。监视这些应该让您有机会在窗口关闭时通过以下方式在 DOM 卸载时回调:
var newWin = window.open('/some/url');
newWin.onunload = function(){
// DOM unloaded, so the window is likely closed.
}
回答by eje211
If you can use the jQuery UI Dialog, it actually has a closeevent.
如果您可以使用jQuery UI Dialog,它实际上有一个close事件。
回答by jAndy
To open a new window call:
要打开一个新窗口调用:
var wnd = window.open("file.html", "youruniqueid", "width=400, height=300");
If you just want to know when that window is going to close, use onunload.
如果您只想知道该窗口何时关闭,请使用onunload.
wnd.onunload = function(){
// do something
};
If you want a confirmation from the user before the can close it, use onbeforeunload.
如果您想在关闭它之前得到用户的确认,请使用onbeforeunload.
wnd.onbeforeunload = function(){
return "are you sure?";
};
回答by Powerlord
We do this in one of my projects at work.
我们在我的工作项目之一中做到了这一点。
The trick is to have a JS function in your parent page that you plan to call when the popup is closed, then hook the unload event in the popup.
诀窍是在您计划在弹出窗口关闭时调用的父页面中有一个 JS 函数,然后在弹出窗口中挂钩 unload 事件。
The window.openerproperty refers to the page that spawned this popup.
该window.opener属性是指产生此弹出窗口的页面。
For example, if I wrote a function named callingPageFunctionon my original page, I would call it from the popup like this:
例如,如果我写了一个callingPageFunction在我的原始页面上命名的函数,我会像这样从弹出窗口中调用它:
$(window).unload(function() {
window.opener.callingPageFunction()
});
Two notes:
两个注意事项:
- This should be wrapped in a ready function.
- I have an anonymous function because you may want other logic in there
- 这应该包含在一个就绪函数中。
- 我有一个匿名函数,因为您可能需要其他逻辑
回答by Serginho
I thinks best way is:
我认为最好的方法是:
const popup = this.window.open(url.toString());
popup.addEventListener('unload', ()=> console.log('closed'))
回答by TimS
Yes, handle the onbeforeUnload event for the popup window and then call a function on the parent window using:
是的,处理弹出窗口的 onbeforeUnload 事件,然后使用以下方法调用父窗口上的函数:
window.opener.myFunction()

