Javascript 关闭标签时要求确认

Ask for confirm when closing a tab

提问by AXheladini

When I close my page on some browser I want a message box to appear and to ask me if I really want to close the page or not, with two buttons and if I click Nothen this tab won't be closed.

当我在某些浏览器上关闭我的页面时，我希望出现一个消息框并询问我是否真的要关闭页面，有两个按钮，如果我单击，No则不会关闭此选项卡。

How can I do that?

我怎样才能做到这一点？

回答by BalusC

You need to listen on the beforeunloadevent.

你需要监听beforeunload事件。

Here's a kickoff example:

这是一个启动示例：

window.onbeforeunload = function() {
    return "Hey, you're leaving the site. Bye!";
};

This message will show up in kind of a confirmation dialogue. This message will show up right beforethe client unloads the page. That can be a browser close, butthat can also be a simple navigational action like clicking a link or submitting a form in the page!

此消息将以确认对话框的形式显示。此消息将在客户端卸载页面之前显示。这可以是浏览器关闭，但也可以是简单的导航操作，例如单击链接或在页面中提交表单！

You would most probably also like to turn it off (just set to null) whenever an internal link is clicked or an internal form is submitted. You namely don't want to annoy endusers with unintuitive behaviour. You can do that by listening on the clickevent of the desired links and the submitevent of the desired forms. jQuerymay be of great help here since it does that in crossbrowsercompatible way so that you don't need to write >20 lines of JS code for this:

您很可能还希望在null单击内部链接或提交内部表单时将其关闭（只需设置为）。您不想以不直观的行为惹恼最终用户。您可以通过监听click所需链接的submit事件和所需表单的事件来做到这一点。jQuery在这里可能会有很大帮助，因为它以跨浏览器兼容的方式做到这一点，因此您无需为此编写 > 20 行 JS 代码：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    window.onbeforeunload = function() {
        return "You're leaving the site.";
    };
    $(document).ready(function() {
        $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
        $('form').submit(function() { window.onbeforeunload = null; });
    });
</script>

You only need to give all external links the defacto standard attribute rel="ext"to denote that those are external links.

您只需要为所有外部链接提供事实上的标准属性rel="ext"来表示这些是外部链接。

<a href="http://google.com" rel="ext">Google</a>

回答by cryo

onbeforeunloadfires before onunload.

onbeforeunload火灾前onunload。

You can't cancel the event in onunload. onbeforeunloadallows returning a string from events (e.g. window.onbeforeunload = function() {return "really leave now?"}, and the browser will ask the user a question whether they want to leave your page. The page has no say in stopping the event if "Yes" is clicked (that's the way it should be too in my opinion.)

您无法取消 中的活动onunload。onbeforeunload允许从事件中返回一个字符串（例如window.onbeforeunload = function() {return "really leave now?"}，浏览器会询问用户是否要离开您的页面。如果单击“是”，则页面在停止事件方面没有发言权（这应该是在我的看法。）

General points:

一般要点：

• alert, promptand confirmaren't allowed in either events.
• Neither is supported in Opera.

• alert，prompt并且confirm在任何一个事件中都不允许。
• Opera 都不支持。

WARNING:In IE6/7 at least (and possibly IE8 but not FF/Chrome etc) onbeforeunloadand onunloadare triggered when anchors/javascript links are clicked on. Some examples:

警告：至少在 IE6/7 中（可能还有 IE8，但不是 FF/Chrome 等）onbeforeunload，onunload并且在点击锚点/javascript 链接时触发。一些例子：

• <a href="#myanchor">trigger unload!</a>
• <a href="javascript: alert('message!')">trigger unload!</a>

• <a href="#myanchor">trigger unload!</a>
• <a href="javascript: alert('message!')">trigger unload!</a>

(MSDN is as good a source as any, considering it's non-standard and that Firefox/Chrome/Safari seems to largely have copied the implementation from IE.)

（考虑到 MSDN 是非标准的，而且 Firefox/Chrome/Safari 似乎在很大程度上复制了 IE 的实现，因此 MSDN 与任何来源一样好。）

回答by Sean Kinsey

use the onbeforeunload event

使用 onbeforeunload 事件

window.onbeforeunload = function(){
    return "Are you sure you want to close the window?";
}

This will display a messagebox where the user can choose whether or not to close the window.

这将显示一个消息框，用户可以在其中选择是否关闭窗口。

Note that this is not supported by Opera.

请注意，Opera 不支持此功能。