logo标签列表

JavaScript + onbeforeunload

javascriptonbeforeunload
31

我有一个关于应用程序的查询。每当用户意外关闭浏览器窗口时，我希望在此之前进行一些清理操作。我已经使用了onunload事件，但问题是该事件有时会触发，有时不会触发。我该怎么办？有更好的方式来处理这种类型的问题吗。

请翻译以下与编程有关的内容： NB：同一用户提出的看似相关的问题：http://stackoverflow.com/questions/1254869/javascript-onunload-event - Jonik
还有https://dev59.com/xHM_5IYBdhLWcg3ww18Q等相关内容。 - Jonik
1
这个主题中没有一个答案能够适用于新的浏览器政策。Chrome和Firefox完全禁用了onbeforeunload功能，以防止表单关闭。而且你甚至不能更改默认消息。在IE和Edge中，你只能更改默认消息，但无法阻止页面重新加载。 - M.R.Safari
6个回答
37
我尝试使用onbeforeunload事件来给用户一个警告，但现在的问题是我得到了两个警告，一个是我给出的，另一个是浏览器给出的。我只想让我的警告触发。你能告诉我如何摆脱这个问题吗？ - pradeep
1
SO问题的链接可能会有帮助。 - rahul
可能，停止事件传播到您的事件处理程序或使用preventDefault();函数。 - realtebo
7

尝试：

window.onbeforeunload = function() { ...your code... }
我尝试使用onbeforeunload事件来给用户一个警告，但现在的问题是我得到了两个警告，一个是我给出的，另一个是浏览器给出的。我只想要我的警告被触发。你能告诉我如何摆脱这个问题吗？ - pradeep
Mozilla？如何摆脱？我希望这个事件在所有浏览器中都可以工作。 - pradeep
3
如果在浏览器的警告之前有你的警告，那就没问题了。这是一个安全问题，你不能覆盖浏览器的业务逻辑。 - Davide Ungari
还没有尝试过，但请确保您的函数根本不返回任何内容。 - Tilendor
4

这是可行的：

window.onbeforeunload = function(){
    console.log('closing shared worker port...');
    return 'Take care now, bye-bye then.';
  };

这对于处理SharedWorkers并告知worker有一个端口不再使用非常方便。否则，你可能会在刷新浏览器选项卡时得到类似于“成功连接：与其他10个选项卡”之类的结果，因为其中一个选项卡在保持worker存活，而另一个选项卡的刷新会不断向数组中添加新的端口连接。希望这能帮到你。
4

根据我的经验，onunload在不同的浏览器中有不同的工作方式。为什么不使用另一个事件处理程序称为onbeforeunload呢？它应该可以解决你的问题。onbeforeunload会在窗口关闭之前首先执行，因此应该可以解决你的问题。

2

由于安全原因，不允许这样做。onbeforeunload是一个浏览器API，在不同的浏览器上有不同的行为。

1

这是我的一个答案，只在用户想要关闭窗口并且为一定程度上劫持浏览器消息时才提供 onbeforeunload。

<html>
<head>
<script src='http://code.jquery.com/jquery-1.6.2.min.js'></script> <!--this is get jquery header file its not required but i have used jquery for minor correction-->
<script type="text/javascript" src="http://fbug.googlecode.com/svn/lite/branches/firebug1.4/content/firebug-lite-dev.js"></script><!--this will give a firebug to check the console in IE-->
<script language='javascript'>
window.onbeforeunload = function(evt){
  var message = "";
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;  //validating the browser where its chrome or not
  if(is_chrome){
    message = "Do you want to close the browser or not?";
  }
  if(this.flag == 1 || $('#help').css('background-color') == 'red'){
    console.log("red");
    return message;
  } else { console.log("blue"); return NULL;}
}
function change(){
  $('#help').css('background-color','red');
  this.flag = 1;
}
</script>

</head>
<body> 
  <a id='help' onclick=change() title="please click on Links">Links</a> 
</body>
</html>

我认为这可能对任何人都有用，谢谢.....

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接