DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript判斷網頁是關閉還是刷新
javascript判斷網頁是關閉還是刷新
編輯:關於JavaScript     

原理就是通過離開頁面行為時間onunload觸發時間去檢測此時的浏覽器的窗口大小,根據大小由此判斷用戶是刷新,跳轉或是關閉行為程序

 代碼如下 

window.onunload = function(){    
    var a_n = window.event.screenX - window.screenLeft;    
    var a_b = a_n > document.documentElement.scrollWidth-20;    
    if(a_b && window.event.clientY< 0 || window.event.altKey){    
         alert('關閉頁面行為'); 
    }else{ 
         alert('跳轉或者刷新頁面行為');   
      } 
}

用浏覽器右上角的關閉按鈕時好用,但在選項卡上關閉和在任務欄上關閉,這個方法就不作用了

js標簽只有onloadonunloadonbeforeunload事件,而沒有onclose事件。

不管頁面是關閉還是刷新都會執行onunload事件。

如何捕捉到頁面關閉呢?
頁面加載時只執行onload
頁面關閉時只執行onunload
頁面刷新時先執行onbeforeunload,然後onunload,最後onload。

這樣我們可以在onbeforeunload中加一個標記,在onunload中判斷該標記,即可達到判斷頁面是否真的關閉了
更完整的兼容ff

 代碼如下 

<mce:script type="text/javascript"><!--
    function close(evt) //author: sunlei
    {  
      var isIE=document.all?true:false;
      evt = evt ? evt :(window.event ? window.event : null);
      if(isIE){//IE浏覽器
        var n = evt.screenX - window.screenLeft;
        var b = n > document.documentElement.scrollWidth-20;
        if(b && evt.clientY<0 || evt.altKey){
          //alert("是關閉而非刷新");
          window.location.href="../include/logout.php";
        }
        else{
          //alert("是刷新而非關閉");
          return false;
        }
      }
      else{//火狐浏覽器
        if(document.documentElement.scrollWidth!=0)
        {
          //alert("是刷新而非關閉");
          //window.location.href="report_list.php?ss=1";
          return false;
          
        }
        else{
          alert("是關閉而非刷新");
          //window.location.href="repost_list.php?ss=0";
          //alert("bbbbbbb");
        }
      }
    }
// --></mce:script>
<BODY onunload="close(event);"> 

上面的方法沒辦法判斷多選項卡的浏覽器,如360,ie8這種,下面再看

 代碼如下 

function CloseOpen(event) { 
     if(event.clientX<=0 || event.clientY<0) { 
       //獲取當前時間
      var date=new Date();
      //將date設置為過去的時間
      alert("關閉網頁");
      date.setTime(date.getTime()-10000);
      //將userId這個cookie刪除
      document.cookie="zhuangtao;expire="+date.toUTCString();
      document.cookie="quanxianzifucuan;expire="+date.toUTCString();
      document.cookie="quanxian;expire="+date.toUTCString();
     s0 += "關閉窗口!"; sw = 1;
      onbeforeunload();
      // window.event.returnValue = '關閉浏覽器將退出系統.';
     } 
     else 
     { 
        alert("刷新或離開"); 
     } 
 } 
       
        var currentKeyCode = -1;

  function document.onkeydown() { // 本窗口的所有下屬頁面都必須含有本函數

    top.currentKeyCode = event.keyCode;
  }

  function onbeforeunload(){
  
   var sw = 0, s0 = "";
    if (currentKeyCode == 116) 
    {
      s0 += "刷新窗口!(F5)";
    }
    else 
    {
      if ((event.altKey)&&(currentKeyCode == 115)) 
      {
         s0 += "關閉窗口!(alt+F4)"; sw = 1;
          //獲取當前時間
          var date=new Date();
          //將date設置為過去的時間
         alert("關閉窗口");
          date.setTime(date.getTime()-10000);
          //將userId這個cookie刪除
          document.cookie="zhuangtao;expire="+date.toUTCString();
          document.cookie="quanxianzifucuan;expire="+date.toUTCString();
          document.cookie="quanxian;expire="+date.toUTCString();
      }
      else 
      {
        if ((event.clientX > 0)&&(event.clientX < document.body.clientWidth)) 
        {
         s0 += "刷新窗口!";
        }
        else 
        {
        //獲取當前時間
          var date=new Date();
          //將date設置為過去的時間
          alert("關閉網頁");
          date.setTime(date.getTime()-10000);
          //將userId這個cookie刪除
          document.cookie="zhuangtao;expire="+date.toUTCString();
          document.cookie="quanxianzifucuan;expire="+date.toUTCString();
          document.cookie="quanxian;expire="+date.toUTCString();
         s0 += "關閉窗口!"; sw = 1;
        }
      }
    }
    if (sw == 1) 
    {
     event.returnValue = "";
    }
    else 
    {
     currentKeyCode = -1;
    }
  
  }

<body onunload="CloseOpen(event)" ></body></html>

上面只有不能使用在任務欄關閉了,基本可以滿足我們的要求了。

以上內容就是本文給大家介紹的javascript判斷網頁是關閉還是刷新,希望大家喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved