本篇文章給大家介紹js判斷網(wǎng)頁(yè)是關(guān)閉還是刷新，實(shí)現(xiàn)原理就是通過(guò)離開頁(yè)面行為時(shí)間onunload觸發(fā)時(shí)間去檢測(cè)此時(shí)的瀏覽器的窗口大小，根據(jù)大小由此判斷用戶是刷新，跳轉(zhuǎn)或是關(guān)閉行為程序，需要的朋友可以參考下本文

原理就是通過(guò)離開頁(yè)面行為時(shí)間onunload觸發(fā)時(shí)間去檢測(cè)此時(shí)的瀏覽器的窗口大小，根據(jù)大小由此判斷用戶是刷新，跳轉(zhuǎn)或是關(guān)閉行為程序

代碼如下

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('關(guān)閉頁(yè)面行為'); 
    }else{ 
         alert('跳轉(zhuǎn)或者刷新頁(yè)面行為');   
      } 
}

用瀏覽器右上角的關(guān)閉按鈕時(shí)好用，但在選項(xiàng)卡上關(guān)閉和在任務(wù)欄上關(guān)閉，這個(gè)方法就不作用了

js標(biāo)簽只有onloadonunloadonbeforeunload事件，而沒有onclose事件。

不管頁(yè)面是關(guān)閉還是刷新都會(huì)執(zhí)行onunload事件。

如何捕捉到頁(yè)面關(guān)閉呢？
頁(yè)面加載時(shí)只執(zhí)行onload
頁(yè)面關(guān)閉時(shí)只執(zhí)行onunload
頁(yè)面刷新時(shí)先執(zhí)行onbeforeunload，然后onunload，最后onload。

這樣我們可以在onbeforeunload中加一個(gè)標(biāo)記，在onunload中判斷該標(biāo)記，即可達(dá)到判斷頁(yè)面是否真的關(guān)閉了
更完整的兼容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("是關(guān)閉而非刷新");
          window.location.href="../include/logout.php";
        }
        else{
          //alert("是刷新而非關(guān)閉");
          return false;
        }
      }
      else{//火狐瀏覽器
        if(document.documentElement.scrollWidth!=0)
        {
          //alert("是刷新而非關(guān)閉");
          //window.location.href="report_list.php?ss=1";
          return false;
          
        }
        else{
          alert("是關(guān)閉而非刷新");
          //window.location.href="repost_list.php?ss=0";
          //alert("bbbbbbb");
        }
      }
    }
// --></mce:script>
<BODY onunload="close(event);">

上面的方法沒辦法判斷多選項(xiàng)卡的瀏覽器，如360,ie8這種，下面再看

代碼如下

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

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

    top.currentKeyCode = event.keyCode;
  }

  function onbeforeunload(){
  
   var sw = 0, s0 = "";
    if (currentKeyCode == 116) 
    {
      s0 += "刷新窗口!(F5)";
    }
    else 
    {
      if ((event.altKey)&&(currentKeyCode == 115)) 
      {
         s0 += "關(guān)閉窗口!(alt+F4)"; sw = 1;
          //獲取當(dāng)前時(shí)間
          var date=new Date();
          //將date設(shè)置為過(guò)去的時(shí)間
         alert("關(guān)閉窗口");
          date.setTime(date.getTime()-10000);
          //將userId這個(gè)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 
        {
        //獲取當(dāng)前時(shí)間
          var date=new Date();
          //將date設(shè)置為過(guò)去的時(shí)間
          alert("關(guān)閉網(wǎng)頁(yè)");
          date.setTime(date.getTime()-10000);
          //將userId這個(gè)cookie刪除
          document.cookie="zhuangtao;expire="+date.toUTCString();
          document.cookie="quanxianzifucuan;expire="+date.toUTCString();
          document.cookie="quanxian;expire="+date.toUTCString();
         s0 += "關(guān)閉窗口!"; sw = 1;
        }
      }
    }
    if (sw == 1) 
    {
     event.returnValue = "";
    }
    else 
    {
     currentKeyCode = -1;
    }
  
  }

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

上面只有不能使用在任務(wù)欄關(guān)閉了，基本可以滿足我們的要求了。

以上內(nèi)容就是本文給大家介紹的javascript判斷網(wǎng)頁(yè)是關(guān)閉還是刷新，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

ie和firefox不兼容的解決方法集合
網(wǎng)頁(yè)設(shè)計(jì)很多情況下，需要注意ie跟firefox的不同區(qū)別，腳本之家提供了不好這樣的文章，大家可以好好看下。
2009-04-04
element-ui組件中input等的change事件中傳遞自定義參數(shù)
這篇文章主要介紹了element-ui組件中的input等的change事件中傳遞自定義參數(shù)的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
JS實(shí)現(xiàn)為表格動(dòng)態(tài)添加標(biāo)題的方法
這篇文章主要介紹了JS實(shí)現(xiàn)為表格動(dòng)態(tài)添加標(biāo)題的方法,涉及javascript中createCaption方法添加標(biāo)題的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JS動(dòng)畫效果代碼3
用js實(shí)現(xiàn)的動(dòng)畫效果
2008-04-04
這篇文章主要介紹了js網(wǎng)頁(yè)右下角提示框的實(shí)現(xiàn)方法,以實(shí)例展示了css樣式與HTML布局,以及對(duì)應(yīng)的js顯示與關(guān)閉提示框等功能,需要的朋友可以參考下
2014-10-10