Question

我正在尝试在用户关闭或重新启动页面时实现通知。我正在使用以下代码

function unloadPage(){
    return "Your changes will not be saved.";
}
window.onbeforeclose = unloadPage;

这很好用。但问题是每当导航发生时都会发生这种情况。这可能是页面刷新或表单提交或超链接点击或任何导航发生..我只想为浏览器使用此代码刷新和关闭。我知道设置标志并检查它。但是我必须将它集成到一个大的应用程序中。所以在每个页面中添加代码都很困难。所以有一个简单的方法。有没有办法捕获刷新或浏览器cosing，以便可以使用它。

Answer 1

请注意，在您的代码中，您使用的是onbeforeclose，但事件名称为beforeunload，因此属性为onbeforeunload，而不是onbeforeclose。

我只想将此代码用于浏览器刷新和关闭。有没有办法捕获刷新或浏览器cosing，以便可以使用它。

没有。相反，您必须捕获每个链接和表单提交，并设置一个标志，告诉您的onbeforeunload处理程序不返回字符串，或删除onbeforeunload处理程序（可能标志更清晰）。 / p>

例如：

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以外的其他内容作为标志来展示自己的内置消息。

Answer 2

检查this link

它为您提供有关如何处理 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;
}

Answer 3

您的问题的一个简单解决方案是拥有一个标志，然后仅在标志有效时调用您的函数。在这种情况下，您可以将锚标记，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();  
});

Answer 4

DEMO

（运行或刷新小提琴以查看提醒onbeforeunload()活动消息并点击“kk”链接，它不会显示onbeforeunload()活动消息。请在您的网页中试用

我有一个解决方案，你不必为每个标签添加onclick事件。

只需将其添加到您网页上的任何位置即可。

<input type="hidden" value="true" id="chk"/>

并将此代码添加到文档标题

<script>
window.onbeforeunload = confirmExit;
function confirmExit()
{
   if(document.getElementById("chk").value=="true")
   {
      return "Your changes will not be saved.";
   }
}

document.onclick = myClickHandler;
function myClickHandler() {
      document.getElementById("chk").value="false";
    }
<script>

希望这有帮助

谢谢

仅在浏览器关闭时通知用户

4 个答案: