如何在浏览器中制作“您确定要离开此页面”的警告消息？

Question

我有一个包含文本框和提交按钮的网页。当用户编辑文本框中的文本并点击其他链接（而不是提交按钮）时，我该如何显示“您确定要离开此页面吗”的弹出消息？

我在网络上进行了研究，并找到了一些JavaScript示例。这是唯一的方法吗？如果不是，那么最好的方法是什么？

- Theomax

Answer 1

这是实现同一事物的多种方式之一。

function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye;

我从这里得到了它 open js

。

- Andrei G

---

您的代码也将在关闭浏览器、链接、后退和前进导航链接以及刷新页面时触发，因此不适合使用onbeforeunload。 - Kunal Vashist

Answer 2

简单的解决方案

    window.onbeforeunload = confirmExit;

    function confirmExit() {
        return "Are you sure you want to leave this page?";
    }

4guysFromRolla.com - 离开页面时提示用户保存

- Mubarek

---

您的代码将在关闭浏览器、链接、后退和前进导航链接以及刷新页面时触发，因此不适合使用onbeforeunload。 - Kunal Vashist

@KunalVashist 是的，你说得对，这就是它的用途。它通常用于数据输入页面。我提供的链接下方有一个检查代码，仅在更改时触发！ - Mubarek

但是刷新页面可能会导致问题，在这种情况下我没有离开页面.. - Kunal Vashist

@KunalVashist 当然，当你刷新页面时，意味着请求页面的新版本，而你有一些要保存的内容，在这种情况下，如果你尝试在输入表单之外执行任何其他操作，它应该提示你。我真的很好奇，KunalVashist，如果我没有对表单进行任何更改并且想要刷新页面，你是否有其他机制来避免这种情况发生。 - Mubarek

是的，Cookie可以用于检测页面的刷新。当网站第一次被访问时，您可以建立一个带有时间戳的Cookie，并在页面刷新时比较这个时间戳。 - Kunal Vashist

Answer 3

您不能使用onbeforeunload窗口方法，因为它会被多种方式触发，例如前进和后退浏览器导航链接、刷新页面、关闭页面、单击链接。

我认为您需要绑定要显示导航离开消息的链接标签，然后使用函数来显示状态消息。

 window.addEvent('domready',function(){

         $$('a').addEvent('click', function(e) {
        //leaving(); function u wrote for displaying message

    });

});


function leaving(e) {
    if(!e)
      e = window.event;
//  return code for the displaying message
}

- Kunal Vashist

Answer 4

只有unload()事件可以在JS上工作。你无法在服务器上管理它。

- napolux

Answer 5

请查看SO上另一个问题的答案，它与您的问题非常相似

如何在提交更改时显示“您确定要离开此页面吗？”

- Anthony Shaw

Answer 6

如果您想以一种几乎可以在所有浏览器上保证正常工作的方式来完成此操作，请使用JQuery库。以下是卸载事件的描述。

http://www.w3schools.com/jquery/event_unload.asp

正是为了像您这样的目的而设计的。

稍微解释一下，您需要下载jquery js库并在项目/页面中引用它，但您最终可能会想要这样做。

如果您想从服务器端控制此操作，可以在OnPreRender中动态发出jquery调用。

- swannee

---

这样做不会阻止导航，这正是重点。如果您向用户提供确认框，询问他们是否想要取消导航以保存更改，则页面仍将导航到其他页面，更改将丢失。 - JoeBrockhaus

Answer 7

查看Jquery的.beforeunload属性。这是一个例子：

$(window).bind('beforeunload', function(){ return 'Click OK to exit'; }); 

请注意，beforeunload 无法阻止页面卸载或重定向到另一个页面，这是显而易见的原因；否则会很容易被滥用。如果您只想在卸载前运行一个函数，请尝试以下操作：

$(window).unload(function(){ alert('Bye.'); }); 

最后，别忘了在头部标签中使用以下代码引用jQuery：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

以上代码可以从互联网获取最新版本并为您节省下载的麻烦，当然您也可以选择下载，但我只是想让您的事情尽快完成。 哦，我还为您找到了一个示例。点击这里查看在关闭页面之前调用函数的页面。希望这能帮到你。

- Lukas

Answer 8

我已经成功地使用Andrei G的答案使它工作了。我想补充一点，在Chrome中让它工作，只需在他的goodbye函数末尾添加以下内容：

return ""；

- Rudy Scoggins