如何构建 jquery/javascript 来完成事件/警报，如 SO 的“确认导航？” [复制]答案

【问题标题】：How to build the jquery/javascript to accomplish event/alert like SO's "Confirm Navigation?" [duplicate]如何构建 jquery/javascript 来完成事件/警报，如 SO 的“确认导航？” [复制]
【发布时间】：2012-11-30 00:56:34
【问题描述】：

可能重复：
How to show the “Are you sure you want to navigate away from this page?” when changes committed?

Stackoverflow 有一个非常有趣的功能：如果您开始写一个新问题，然后您尝试离开该页面，它会显示一个警告，要求您确认是否要离开此页面。无论您是输入新地址并在地址栏中输入地址、使用前进/后退按钮等，这都有效。

这是如何工作的？我有兴趣了解有关警报本身的更少信息，更具体地了解触发警报的事件/代码。

谢谢！

【问题讨论】：

window.onunload 会为您执行此操作，进行谷歌搜索，应该有几百万个网站可供选择。

标签： javascript jquery navigation

【解决方案1】：

修改文本区域时设置一个标志。在窗口的unload() 事件上检查该标志，并在需要时显示alert()。像这样的：

var textAmended = false;
$("textarea").change(function() {
    textAmended = true;
});

$(window).unload(function() {
    if (textAmended) {
        alert('You started writing a question...');
    }
});

More information on unload()

【讨论】：

我不认为它真的适用于警报，它不只是一个返回到触发确认框的卸载函数的字符串吗？

【解决方案2】：

这通常通过检查 textarea、input 等的值并更改 window.onunload 函数来完成，或者通过传递一个字符串或不传递任何内容，如下所示：

$('textarea').change(function() {
    if( this.value == "" ) {
        window.onbeforeunload = null;
    }else{
        window.onbeforeunload = "Are you sure you want to leave?";
    }
});

这应该会触发内置的确认！

【讨论】：

【解决方案3】：

我认为您需要确认只是离开当前窗口或关闭它：

http://jsfiddle.net/tLWZX/

$(window).on('beforeunload', function() {
    return 'You have unsaved changes.';
});

【讨论】：

【解决方案4】：

window.onbeforeunload = exit;
function exit() {
var t = 0;
$("textarea").each( function() {
var v = $(this).val();
if(v!="") {
t=t+1;
}
});
if(t>=1) {
return "You Have Some text written in textareas. Still you want to leave?";
}
}

你想要的是最好和最纯粹的方式！

http://jsfiddle.net/p4NPh/

【讨论】：

这在 OPERA 中不起作用