仅在浏览器关闭时通知用户
我试图在用户关闭或重新启动页面时实现通知。我正在使用以下代码
function unloadPage(){ return "Your changes will not be saved."; } window.onbeforeclose = unloadPage; 这很好。但问题是每当导航发生时就会发生这种情况。这可能是页面刷新或表单提交或超链接点击或任何导航发生..我只想在浏览器刷新和关闭时使用此代码我知道设置一个标志并检查它。 但我必须将它集成到一个大型应用程序中。所以在每个页面中添加代码都很困难。所以有一个简单的方法。 有没有办法捕获刷新或浏览器cosing，以便可以使用它。
请注意，在您的代码中，您使用的是onbeforeclose ，但事件名称是beforeunload ，因此属性是onbeforeunload ，而不是onbeforeclose 。
我只想将此代码用于浏览器刷新和关闭。 有没有办法捕获刷新或浏览器cosing，以便可以使用它。
相反，您必须捕获每个链接和表单提交，并设置一个标志告诉您的onbeforeunload处理程序不返回字符串，或删除onbeforeunload处理程序（可能标志更清晰）。
例如：
var warnBeforeClose = true; function unloadPage(){ if (warnBeforeClose) { return "Your changes will not be saved."; } } window.onbeforeunload = unloadPage; // ...when the elements exist: $("a").click(dontWarn); $("form").submit(dontWarn); function dontWarn() { // Don't warn warnBeforeClose = false; // ...but if we're still on the page a second later, set the flag again setTimeout(function() { warnBeforeClose = true; }, 1000); }
或者没有setTimeout （但仍然有超时）：
var warningSuppressionTime = 0; function unloadPage(){ if (+new Date() - warningSuppressionTime > 1000) { // More than a second return "Your changes will not be saved."; } } window.onbeforeunload = unloadPage; // ...when the elements exist: $("a").click(dontWarn); $("form").submit(dontWarn); function dontWarn() { // Don't warn for the next second warningSuppressionTime = +new Date(); }
2017年更新 ：另请注意，至少在几年前，浏览器不会显示您返回的消息; 他们只是使用你返回null其他东西作为标志，以显示他们自己的内置消息。
检查此链接
它为您提供有关如何处理onbeforeunload事件的信息。
我们的想法是在页面上有一个全局标志。 对字段进行任何更改时，此标志设置为true。 单击“保存”按钮时，此标志需要设置为false。
在onbeforeunload事件中，检查标志是否为true，然后相应地显示消息。
var needToConfirm = true; window.onbeforeunload = confirmExit; function confirmExit() { if (needToConfirm) { // check on the elements whether any change has been done on the fields. // If any change has been done, then set message here. } } function saveClicked() { needToConfirm = false; }
解决问题的一个简单方法是使用标志，然后仅在标志有效时调用函数。 在这种情况下，您可以将锚标记，F5键和表单提交按钮单击绑定到将标志设置为false的事件。 因此，只有在上述情况没有发生时，您的警报栏才会显示:)
这是脚本：
var validNavigation = false; function endSession() { // Browser or broswer tab is closed alert("bye"); } function wireUpEvents() { window.onbeforeunload = function() { if (!validNavigation) { endSession(); } } // Attach the event keypress to exclude the F5 refresh $(document).bind('keypress', function(e) { if (e.keyCode == 116){ validNavigation = true; } }); // Attach the event click for all links in the page $("a").bind("click", function() { validNavigation = true; }); // Attach the event submit for all forms in the page $("form").bind("submit", function() { validNavigation = true; }); // Attach the event click for all inputs in the page $("input[type=submit]").bind("click", function() { validNavigation = true; }); } // Wire up the events as soon as the DOM tree is ready $(document).ready(function() { wireUpEvents(); });
DEMO
（运行或刷新小提琴以查看警告onbeforeunload()事件消息并单击链接“kk”，它不会显示onbeforeunload()事件消息。在您的网页中尝试）
我有一个解决方案，你不必为每个标签添加onclick事件。
只需将其添加到您网页上的任何位置即可。
并将此代码添加到您的文档头标记
希望这可以帮助
谢谢