Javascript 如何检测窗口（新标签页）关闭事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3185105/
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
How to detect the window(new tab) close event?
提问by Eswar
I have one parent page and child page. the child page opened in new tab
我有一个父页面和一个子页面。在新标签页中打开的子页面
I want to show one alert message (The child page is closing),when i close the child tab.
How to show the closing messgae, when close the tab? (Not refreshing time)
当我关闭子选项卡时，我想显示一条警报消息（子页面正在关闭）。
关闭选项卡时如何显示关闭消息？（不刷新时间）
I used onunload, and onbeforeunload.
Two methods are also called, when the page refresh and tab closing.
我使用了onunload和onbeforeunload。
页面刷新和选项卡关闭时也调用了两个方法。
window.onunload = function doUnload(e)
{
alert('Child window is closing...');
}
and
和
window.onbeforeunload = function doUnload(e)
{
alert('Child window is closing...');
}
I must show the alert message, only close the tabin browser.
我必须显示警报消息，只关闭浏览器中的选项卡。
Help me. Thanks in advance.
帮我。提前致谢。
Update
更新
I use the following script. Its worked In IE. But not worked in FireFox
我使用以下脚本。它在 IE 中工作。但在 FireFox 中不起作用
<script language="javascript" type="text/javascript">
window.onbeforeunload = function()
{
if ((window.event.clientX < 0) || (window.event.clientY < 0) || (window.event.clientX < -80))
{
alert("Child window is closing...");
}
};
</script>
How to acheive this in FireFox and other Browser.
如何在 FireFox 和其他浏览器中实现这一点。
回答by mplungjan
There is afaik never been a cross browser script for this. The solution is to NOT rely on undocumented and changeable features of a specific browser to detect something that is important.
对此，afaik 从未有过跨浏览器脚本。解决方案是不要依赖特定浏览器的未记录和可更改的功能来检测重要的内容。
Since you have a CHILD page, you can set up a test in the parent (opener) that at intervals test the childWindowHandle.closed property and acts on that.
由于您有一个 CHILD 页面，您可以在父页面（开启程序）中设置一个测试，每隔一段时间测试 childWindowHandle.closed 属性并对其进行操作。
回答by Alex
Does the script from http://chrismckee.co.uk/good-sir-before-you-unload-crossbrowser-javascript-headaches/work?
来自http://chrismckee.co.uk/good-sir-before-you-unload-crossbrowser-javascript-headaches/的脚本是否有效？
Assuming your just trying to fire beforeunload event crossbrowser, this pretty much does it ( excluding opera )
假设您只是尝试在 beforeunload 事件跨浏览器中触发，这几乎可以做到（不包括 opera）
try{
// http://www.opera.com/support/kb/view/827/
opera.setOverrideHistoryNavigationMode('compatible');
history.navigationMode = 'compatible';
}catch(e){}
//Our Where The F' Are You Going Message
function ReturnMessage()
{
return "WTF!!!";
}
//UnBind Function
function UnBindWindow()
{
window.onbeforeunload = null;
return true;
}
//Bind Links we dont want to affect
document.getElementById('homebtn').onclick = UnBindWindow;
document.getElementById('googlebtn').onclick = UnBindWindow;
//Bind Exit Message Dialogue
window.onbeforeunload = ReturnMessage;
回答by Gary
You might not be able to do that other than some cookie based methods which is development work arounds like non persistent cookies. Second identifying a page refresh, form based redirect, or back redirect or browser close unload event identification is not direct and is tedious. Recommend not to depend on it.
除了一些基于 cookie 的方法之外，您可能无法做到这一点，这些方法是非持久性 cookie 之类的开发工作。第二个识别页面刷新、基于表单的重定向、或返回重定向或浏览器关闭卸载事件识别不是直接的并且是乏味的。建议不要依赖它。
you can do some small things before the customer closes the tab. javascript detect browser close tab/close browserbut if your list of actions are big and the tab closes before it is finished you are helpless. You can try it but with my experience donot depend on it. Yes, you cannot at this time differentiate back and refresh and close. So no foolproof way of saying whether the child has definitely closed.
您可以在客户关闭选项卡之前做一些小事。javascript 检测浏览器关闭选项卡/关闭浏览器，但是如果您的操作列表很大并且选项卡在完成之前关闭，您将无能为力。你可以试试，但根据我的经验，不要依赖它。是的，您此时无法区分返回、刷新和关闭。所以没有万无一失的说法孩子是否已经关闭。
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
/* Do you small action code here */
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
回答by GustyWind
There is an example in Mozilla Devloper sitewhich basically says check for browser type and use the below check accordingly.Hope this helps.
Mozilla Devloper 站点中有一个示例，它基本上说检查浏览器类型并相应地使用以下检查。希望这会有所帮助。
