logo标签列表

如何使用javascript检测浏览器标签页的刷新或关闭

javascriptjqueryhtml
3

我有一个问题，我有一个javascript函数，我想在浏览器关闭时使用它，如何检测浏览器正在关闭？

我已经做了一些研究，得到了解决方案，例如onunload或beforeunload，但这两个函数在重新加载页面时都会执行，是否有任何解决方案可以区分重新加载和关闭浏览器/选项卡。

3
据我所知，你无法区分它们。 - alex
也许如果你解释一下当浏览器关闭时你的函数将会做什么，那么有人可以提供一个更好的替代方案？ - David 'the bald ginger'
实际上，我有一个 JavaScript 函数，当用户单击注销操作时调用该函数，该函数在用户注销后从数据库中删除某些行，我希望在用户关闭浏览器时也调用相同的函数。 - Rohitashv Singhal
如果用户注销，您想从数据库中删除这一行中的哪些数据？通常情况下，人们只需添加记录或修改现有记录以跟踪网站上的用户活动。 - David 'the bald ginger'
这行代码包括特定用户的活动。 - Rohitashv Singhal
显示剩余3条评论
3个回答
4
不，你无法知道这个。HTML页面并不是浏览器的“所有者”，你只能有限地访问信息，而且这些信息并不在其中。
你可以知道用户何时离开你的页面，但你不知道为什么离开，因为这不关你的事...
当浏览器标签页关闭时，我该如何加载某些函数？ - Rohitashv Singhal
@lord_linus，加载什么？浏览器标签页已关闭... ?! - gdoron
我有一个从数据库中删除某些行的函数（我在使用ajax的javascript函数中使用此函数），我希望在用户注销或关闭浏览器时执行它。 - Rohitashv Singhal
1
@lord_linus，你需要每隔X时间向浏览器发送ping请求，如果服务器在2X时间内没有收到ping请求，那么就执行你想要的操作。我看不到其他选择。这很丑陋而且代价高昂，再次强调没有其他选择。 - gdoron
ping ?? 我怎样可以使用 JS 或者 HTML 来实现？ - Rohitashv Singhal
1
这里不是教程网站，请自行搜索，如果您无法解决问题，请提出新的问题。 - gdoron
2

gdoron的说法是正确的，你无法确定用户为什么/如何“离开页面”。 在极端情况下，你可以通过mousedown事件判断浏览器的CLOSE按钮是否被点击，并让它触发一个警报。 但这可能需要跟踪mousedown事件的X和Y，并且这不是一种很好的做事方式。而且我认为你不会能够准确地确定一个标签页是否关闭。

1
答案是：
</head>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">

var validNavigation = false;

function endSession() {
// Browser or broswer tab is closed
// Do sth here ...
alert("bye");
}

function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
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();  
}); 
</script>    
</head>
<body>
<h1>Eureka!</h1>
  <a href="http://www.google.com">Google</a>
  <a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>
6
如果用户点击刷新图标刷新浏览器标签页，会怎样？ - Vardan
1
实际上并没有解决原始问题，因为它不会区分关闭和重新加载窗口，虽然是很勇敢的尝试。 - macguru2000
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接