关闭选项卡时清除 SESSION 变量答案

【问题标题】：Clearing SESSION variables when a tab is closed关闭选项卡时清除 SESSION 变量
【发布时间】：2013-08-16 14:54:15
【问题描述】：

关闭选项卡时我需要清除会话变量，但到目前为止我找不到任何解决方案。我得到的最接近的是使用“onbeforeunload”函数是javascript。

<body onbeforeunload='destroySession()'>
    <!--Codes for the site includeing php scripts-->
</body>
<script type='text/javascript'>
    function destroySession(){
        $.ajax({
           url: "destroySession.php"
        });
     }
<script>

问题是每次单击、刷新或提交表单时都会调用该函数。有没有更好的方法在关闭选项卡时销毁会话变量，或者我做错了什么？请帮忙。

【问题讨论】：

相信我，停下来。您不会能够可靠而完整地做到这一点。您可以检测到页面是如何以某些方式离开的（单击链接、提交表单等），但您将无法区分“关闭选项卡”和“导航”和许多其他事件。不幸的是我们不能做这种事情（因为像你问的那样清除会话会很好），但是事情没有设置为正常工作。请记住，这是一个网站，而不是桌面应用程序
Close/kill the session when the browser or tab is closed 的可能重复项
与其检测用户离开网站，不如以正确的方式进行，而是在设定的一段时间后将其超时 *提示：您实际上不需要做任何事情来制作发生这种情况！ 当有人同时在两个选项卡中打开您的应用程序（这种情况并不少见），然后决定关闭两个选项卡中的一个时，使用选项卡关闭会很麻烦。
告诉我们你为什么要这样做，因为你可能错过了一个标准做法。
您可能想要使用会话 cookie：en.wikipedia.org/wiki/HTTP_cookie#Session_cookie 当浏览器窗口关闭时，浏览器会自动清除会话 cookie。这对您的用例来说可能已经足够了？

标签： php javascript jquery ajax session-variables

【解决方案1】：

没有安全的方法来处理您要查找的内容。每次离开页面时都会执行 onbeforunload 事件。（昨天我的一个项目遇到了类似的问题）。您可以获得的最接近的是控制用户离开页面的方式。

请参阅 lan 在某些 cmets 中发布的 link。并通过 Daniel Melo 检查答案

我也发现了这个link，但它基本上是从stackoverflow中给出的答案中提取的。

希望这会有所帮助。

【讨论】：

【解决方案2】：

不幸的是，没有办法阻止页面刷新（由表单提交或任何其他导航引起）调用“onbeforeunload”。

【讨论】：

但是您可以在一定程度上检测它是否是由于表单发布或锚点点击。

【解决方案3】：

是的，你可以做到，

</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>

【讨论】：