2014-01-20 158 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

相關問題