2014-01-20 244 views
18

我尝试使用onbeforeunload和Unload函数。但它没有奏效。点击链接或刷新时,此事件被触发。我想要一个只在浏览器窗口或标签页关闭时触发的事件。该代码必须适用于所有浏览器。如何检测浏览器窗口/选项卡关闭事件?

我在主页面使用以下代码。

<script type="text/jscript"> 

    var leaving = true; 
    var isClose = false; 

    function EndChatSession() { 
     var request = GetRequest(); 
     request.open("GET", "../Chat.aspx", true); 
     request.send(); 
    } 
    document.onkeydown = checkKeycode 
    function checkKeycode(e) { 
     var keycode; 
     if (window.event) 
      keycode = window.event.keyCode; 
     else if (e) 
      keycode = e.which; 
     if (keycode == 116) { 
      isClose = true; 
     } 
    } 
    function somefunction() { 
     isClose = true; 
    } 
    window.onbeforeunload = function (e) { 
     if (!e) e = event; 
     if (leaving) { 
      EndChatSession(); 
      e.returnValue = "Are You Sure"; 

     } 
    } 
    function GetRequest() { 
     var xmlHttp = null; 
     try { 
      // Firefox, Opera 8.0+, Safari 
      xmlHttp = new XMLHttpRequest(); 
     } 
     catch (e) { 
      //Internet Explorer 
      try { 
       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      } 
      catch (e) { 
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
     } 
     return xmlHttp; 
    }  
</script> 

,并在我的身体标记:

上面的代码在IE,但不是在铬...

回答

18

此代码可防止复选框事件。它在用户点击浏览器关闭按钮时起作用,但在点击复选框时不起作用。你可以修改它的其他控件(texbox,单选按钮等)

window.onbeforeunload = function() { 
     return "Are you sure?"; 
    } 

    $(function() { 
     $('input[type="checkbox"]').click(function() { 
      window.onbeforeunload = function() { }; 
     }); 
    }); 
+1

在刷新时也会调用警报。 。 。 。任何想法排除刷新事件 – Gora

3

你也可以像下面这样做。

下面放脚本代码在标题标签

<script type="text/javascript" language="text/javascript"> 
function handleBrowserCloseButton(event) { 
    if (($(window).width() - window.event.clientX) < 35 && window.event.clientY < 0) 
    { 
     //Call method by Ajax call 
     alert('Browser close button clicked');  
    } 
} 
</script> 

调用上面的函数从body标签像下面

<body onbeforeunload="handleBrowserCloseButton(event);"> 

谢谢

-2

是的,有!经过很多头痛后,我找到了解决办法。

Monitor.php

这个PHP文件将被监视浏览器关闭事件。一旦浏览器关闭,connection_aborted将返回1,因此循环会中断。

<?php 
// Ignore user aborts and allow the script 
// to run forever 
ignore_user_abort(true); 
set_time_limit(0); 

echo connection_aborted(); 
while(1) 
{ 
echo "Whatever you echo here wont be printed anywhere but it is required in order to work."; 
flush(); 
if(connection_aborted()) 
{ 
break; 
// Breaks only when browser is closed 
} 
} 

/* 
Action you want to take after browser is closed. 
Write your code here 
*/ 
?> 

Caller.php

这是将调用Monitor.php

<?php 
Header('Location: monitor.php'); 
?> 

Parent.html

这将是该文件的文件,该文件你会真正与之互动。加载时会直接对Caller.php进行一次AJAX调用,它将在后台模式下自动启动Monitor.php。

<script> 

var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 

      } 
     } 

    xmlhttp.open("GET", "Caller.php", true); 
     xmlhttp.send(); 

</script> 

所以最终的流量Parent.html -----> Caller.php ----->监视器。PHP

+0

这是否无限运行页面加载?就像在关闭一个窗口之后,系统内存似乎已经满了,系统挂起。 – Anant

+0

这不是一个php问题 – Liam

4
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
var validNavigation = false; 

function wireUpEvents() { 
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation 
var leave_message = 'ServerThemes.Net Recommend BEST WEB HOSTING at new tab window. Good things will come to you' 
function goodbye(e) { 
if (!validNavigation) { 
window.open("http://serverthemes.net/best-web-hosting-services","_blank"); 
return leave_message; 

} 
} 
window.onbeforeunload=goodbye; 

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

我没有答案在Can you use JavaScript to detect whether a user has closed a browser tab? closed a browser? or has left a browser?

-1

作出刷新和关闭的选项卡或导航之间的差别,这是我如何固定它:

<script> 
 
    function endSession() { 
 
     // Browser or Broswer tab is closed 
 
     // Write code here 
 
    } 
 
</script> 
 

 
<body onpagehide="endSession();"> 
 

 
</body>

+0

你的代码在两种情况下都是一样的。 – RicardoGonzales

+0

你的代码不完美,以检测关闭选项卡/窗口,因为onpagehide开枪离开页面。例如。通过点击链接,刷新页面,提交表单,关闭浏览器窗口等。 – mRizvandi

相关问题