0

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

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

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

4

4 回答 4

5

Note that in your code, you're using onbeforeclose, but the event name is beforeunload, so property is onbeforeunload, not onbeforeclose.

I just want to work this code only for browser refreshing and closing. Is there a way to catch the refresh or browser cosing so that can use it.

No. Instead, you'll have to capture each link and form submission and either set a flag telling your onbeforeunload handler not to return a string, or removing your onbeforeunload handler (probably the flag is cleaner).

For example:

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);
}

Or without setTimeout (but still with a timeout):

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();
}

Update in 2017: Also note that as of at least a couple of years ago, browsers don't show the message you return; they just use the fact you returned something other than null as a flag to show their own, built-in message instead.

于 2013-08-19T09:33:24.860 回答
0

解决您的问题的一个简单方法是设置一个标志，然后仅在该标志有效时才调用您的函数。在这种情况下，您可以将锚标记、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();  
});
于 2013-08-19T09:45:23.333 回答
0

检查此链接

它为您提供有关如何处理onbeforeunload事件的信息。

这个想法是在页面上有一个全局标志。当对字段进行任何更改时，此标志设置为 true。单击保存按钮时，需要将此标志设置为 false。

在onbeforeunload事件中，检查标志是否为真，然后相应地显示消息。

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;
}
于 2013-08-19T09:40:50.847 回答
-1

演示

（运行或刷新小提琴以查看警报 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>

希望这可以帮助

谢谢

于 2013-08-19T11:15:34.820 回答