如何对onbeforeunload中的子事件作出反应

How to react to sub events from onbeforeunload?

本文关键字：事件 onbeforeunload      更新时间：2024-03-15

我注意到事件onbeforeunload能够区分不同的用户操作，例如用户是否按下页面上的链接，用户是否试图关闭页面，用户是否想返回一页等。

例如，如果用户单击某个链接，则会出现一个文本为"是否确实要关闭页面？"的确认框，但如果用户按F5刷新页面，则框中的文本为"是否确定要刷新页面？"。

是否可以区分onbeforeunload中的不同子事件并对其做出反应？

如果用户试图离开页面，我会尝试将页面的背景色更改为红色，如果用户试图刷新页面，则会将其更改为橙色，这只是一个简单的测试操作，可以更好地理解。

注意：我将提示中的文本从德语翻译成了英语，因此文本可能会有所不同。

侧面问题：如果我在本地Web服务器上运行此代码，如果我单击链接并按"离开页面"，为什么确认框会出现两次，而如果我在stackoverflow上运行它，则不会出现？

function ask()
{
  return "Are you sure?";
  
  //How can i find out what the user actually tried? 
  //e.g. did he tried to refresh the page? Or did he tried to close it?
  //PSEUDO CODE:
  //  if (user_tried_reload) { alert("RELOAD"); }
  //  else if (user_tried_close) { alert ("CLOSE"); }
}
<body onbeforeunload="return ask()">
    <h1>onbeforeunload Test</h1>
    <a href="http://www.google.de">Google</a>
</body>

用法：按"运行代码片段"，然后是单击链接还是尝试刷新页面。

代码触发两次的原因是"离开页面"按钮重新触发卸载事件。

我建议你做的是捕捉F5按键事件，并做你自己的消息：

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 116) {
        ask('reload');
    }
};

在你的ask（）函数中，我想要这样的东西：

var howmanytimes = 0;
function ask(action)
{
  howmanytimes++;
  //PSEUDO CODE:
  if (howmanytimes == 1) {
     if (action == 'reload') { alert("RELOAD"); }
     else { alert ("CLOSE"); }
  } else { howmanytimes == 0 };
}

这段代码未经测试，我现在无法访问jsfiddle，希望这能给你指明正确的方向（而且我一开始就正确理解了这个问题！）

相关文章：