javascript - 关闭选项卡时要求确认

Question

当我在某些浏览器上关闭页面时，我希望出现一个消息框并询问我是否真的要关闭页面，有两个按钮以及是否单击 No那么这个标签就不会被关闭。

我怎样才能做到这一点？

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>