关闭选项卡时要求确认

Question

当我在某些浏览器上关闭页面时，我希望会出现一个消息框，询问我是否真的要关闭页面，提供两个按钮，并且如果我点击“否”，则该标签页将不会被关闭。

我该如何实现这个功能？

- AXheladini

---

此内容可能是重复的：当用户关闭弹出窗口时调用一些JavaScript。 - Justin Niessner

可能是重复的问题：JavaScript检查浏览器窗口关闭的时间。 - Christian C. Salvadó

Answer 1

你需要监听 beforeunload 事件。

以下是一个简单的示例：

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

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

你很可能还想要在内部链接被点击或内部表单被提交时关闭它（只需将其设置为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>

您只需要给所有外部链接添加事实标准属性rel="ext"来表示这些是外部链接。

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

- BalusC

---

如果您不想显示警告框，那么您无需分离onbeforeunload函数。只需让该函数返回空值，浏览器将按预期继续执行（关闭窗口、返回历史记录等）。 - Marcel Korpel

@Marcel：这确实是另一种禁用该函数的方法。然而，这需要一个全局变量，我尽可能想避免使用它们。 - BalusC

如果添加属性rel="ext"不可行，您还可以将链接的href位置与当前页面进行比较。$('a[href*="'+window.location.host+'"]') - Clayton Selby

使用更好的解决方案更新注释。以下选择所有不属于以下内容的链接：相对路径、在同一域中且不是符号（#）。$('a:not([href^="/"],[href*="'+window.location.host+'"], [href^="#"])') - Clayton Selby

beforeunload在iOS中不再受支持。还有其他解决方案吗？ - Kalleshwar Kalshetty

beforeunload在iOS中不再受支持。还有其他解决方案吗？ - Kalleshwar Kalshetty

Answer 2

使用onbeforeunload事件

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

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

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

- Sean Kinsey

Answer 3

onbeforeunload在onunload之前触发。

在onunload中无法取消事件。 onbeforeunload允许从事件返回字符串（例如window.onbeforeunload = function() {return "really leave now?"}），浏览器将询问用户是否要离开您的页面。如果单击“Yes”按钮，则页面无法停止事件（在我看来，这应该是正确的方式）。

一般要点：

• alert、prompt和confirm在任何事件中都不被允许。
• Opera也不支持它们。

警告：至少在IE6/7中（可能在IE8中也是如此，但不适用于FF/Chrome等），当单击锚/JavaScript链接时，会触发onbeforeunload和onunload。以下是一些示例：

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

（考虑到它是非标准的，而Firefox/Chrome/Safari似乎主要是从IE中复制实现的，因此MSDN是一个很好的来源。）

- cryo