<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    零雨其蒙's Blog

    做優秀的程序員
    隨筆 - 59, 文章 - 13, 評論 - 58, 引用 - 0
    數據加載中……

    頁面關閉彈出提示并注銷登錄(兼容主流瀏覽器)

    這是多么普遍而又正常的需求啊,然而在多瀏覽器時代,這又是多么難做啊~~(我不是FE,我是Java工程師)


       目前這個代碼能夠兼容以下瀏覽器(我親測過的):

       IE8,Chrome12,Firefox5,Safari4

       應該也能支持以下瀏覽器:

       IE7,Chrome8以后的版本,Firefox3.6,4


       由于我們的系統不支持IE6,因此就不考慮這個問題了,估計應該沒啥問題。

       由于Opera不支持beforeunload事件,因此不會彈出提示讓用戶決定是否退出,同時對于刷新回退等操作也不會調用unlaod,因為它認為那是reload,會直接從cache中獲得。我唯一成功響應Opera的unload事件是將Opera關閉了,然后再打開由于它會保留上次的標簽,因此會重新加載,就在這個時候它響應了unload。因此放棄對Opera的支持,畢竟我們的服務對象沒什么人用。


       本來的邏輯是當用戶關閉或者刷新或者后退時會彈出一個提示框詢問用戶是否真的關閉,這里面有以下幾個技術陷阱:

       1 這個事情只能通過beforeunload完成,但是一旦注冊了這個事件,瀏覽器就會彈出個確認框,不需要你自己寫什么confirm,我起初不知道,因為使用了一個開源的產品,找遍了它所有的代碼想解除綁定或者屏蔽那個確認框,后來才發現原來是瀏覽器內置的!

        其用法如下:
        

    Java代碼 
    1.   window.onbeforeunload=function(){          
    Java代碼 
    1. return 'Are you really going to leave?';  
    Java代碼 
    1. }  

     
        注意這個地方IE,Firefox,Chrome,各不相同,Safari跟IE相同:

        IE和Safari會顯示一段內置的話,然后中間顯示你這句話;

        Firefox只會顯示它內置的提示;

        Chrome只會顯示你寫的這段話。

     

        后面讓人崩潰的瀏覽器差異還有很多。  


       2 當刷新或后退時,執行的流程是beforeunload事件,unload事件和load事件。

          但是IE會彈出兩次那個提示框。

       3 當unload事件觸發時,退出登錄,有兩種方法:

          1)發送Ajax請求退出

          2)location.href

          但是,Chrome和Safari(這倆瀏覽器是一個內核)在unload方法里執行location.href無效。

          按照網上說的各種方法,比如window.location,self.location,navigate.go(0)等等,都無效。

          然后使用window.close替代,也無效,后來發現可以這樣:

          window.open('', '_self', ''); //bug fix

          window.close();

          這樣搞完又會彈兩次框。這很正常,因為又打開了一個窗口嘛。

       4 Chrome執行完unload事件后,因為沒有執行location.href因此繼續執行onload方法,悲劇發生了,雖然注銷登錄成功了(通過Ajax的方式),但是本頁面并沒有被filter攔截跳轉到登錄頁面,但是其中引入的js,iframe卻被filter攔住了,通過Fiddler2觀察確實發送了很多次Login那個頁面的請求,然后頁面由于該加載的JS沒過來,就在那兒不動了。這時只有點擊刷新,才會真正的跳轉到Login頁面。

         這是使用window.close的一個理由,否則就算location.href不成功,能在onload時自動跳轉也沒事,但可惜不行。

     

       5 IE和Chrome彈兩次這個問題,應該是通過將綁定事件放到onload,而不是直接寫在<script>標簽中。可能是這兩個瀏覽器的某種機制使得他們會執行兩次。

     

       全部代碼如下:

        <script language='javascript'>

    Java代碼 
    1.      function getOs(){  
    2.          if(navigator.userAgent.indexOf("MSIE")>0)return 1;//IE  
    3.          if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2;//Firefox  
    4.       if(isSafari=navigator.userAgent.indexOf("Chrome")>0)return 3;//Chrome  
    5.          if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 4;//Safari  
    6.          if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 5;//Camino  
    7.          if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 6;//Gecko  
    8.       if(isOpera=navigator.userAgent.indexOf('Opera') >= 0return 7;//Opera  
    9.           //other...  
    10.          return 0;  
    11.          }  
    12.        
    13.      var quite=false;  
    14.        
    15.                
    16.      function bindOnbeforeunload(){  
    17.         quite=false;  
    18.         window.onbeforeunload=checkLeave;  
    19.      }  
    20.        
    21.      function unbindOnbeforeunload(){  
    22.          quite=true;  
    23.          window.onbeforeunload=null;  
    24.      }  
    25.        
    26.        
    27.        
    28.      function checkLeave(){               
    29.              return '您正在離開...';       
    30.        }  
    31.   
    32.   
    33.   window.onunload=function(){  
    34.        try{  
    35.          unbindOnbeforeunload();  
    36.              }catch(e){  
    37.             
    38.           }  
    39.             window.location.href='/Logout';                
    40.             if(getOs()==3||getOs()==4){  
    41.                 var xmlHttp = false;  
    42.             try {  
    43.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
    44.             } catch (e) {  
    45.                 try {  
    46.                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    47.                 } catch (e2) {  
    48.                     xmlHttp = false;  
    49.                 }  
    50.             }  
    51.             if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  
    52.             xmlHttp = new XMLHttpRequest();  
    53.             }  
    54.             var url = "/Logout";  
    55.             xmlHttp.open("POST", url, false);  
    56.             // Send the request  
    57.             xmlHttp.send(null);  
    58.                window.open('''_self'''); //bug fix  
    59.                                   window.close();  
    60.             }  
    61.               
    62.            
    63.            
    64.   }  
    65.     
    66.    
    67.    
    68. </script>  
    69. </head>  

     

         在HTML body中注冊:

          <body oncontextmenu="return false;" onload="javascript:return bindOnbeforeunload();" >

    posted on 2011-08-02 13:24 零雨其蒙 閱讀(5751) 評論(1)  編輯  收藏 所屬分類: 前端開發

    評論

    # re: 頁面關閉彈出提示并注銷登錄(兼容主流瀏覽器)[未登錄]  回復  更多評論   

    a
    2014-07-29 11:18 | a

    只有注冊用戶登錄后才能發表評論。


    網站導航:
    博客園   IT新聞   Chat2DB   C++博客   博問  
     
    主站蜘蛛池模板: 国产亚洲精品免费视频播放| 亚洲国产视频久久| 羞羞网站免费观看| 高清永久免费观看| 毛茸茸bbw亚洲人| 中国内地毛片免费高清| 亚洲无线码在线一区观看| 精品国产免费人成网站| 国产曰批免费视频播放免费s| 亚洲av无码专区在线观看素人| 亚洲综合精品香蕉久久网97| 在线免费观看亚洲| 亚洲人妻av伦理| 亚洲中文无码亚洲人成影院| 麻豆国产VA免费精品高清在线| 国产AV无码专区亚洲精品| 久操视频免费观看| 亚洲综合无码AV一区二区 | 中文字幕乱码亚洲精品一区| 午夜影视在线免费观看| 欧美亚洲国产SUV| 日韩版码免费福利视频| 亚洲精品中文字幕无码A片老| 亚洲高清视频一视频二视频三| 亚洲五月午夜免费在线视频| 亚洲AV无码成人精品区在线观看 | 亚洲 综合 国产 欧洲 丝袜| 美女网站在线观看视频免费的| 亚洲国产第一页www| 国产在线观看麻豆91精品免费| 欧美激情综合亚洲一二区| 亚洲线精品一区二区三区影音先锋 | 无码人妻一区二区三区免费 | 亚洲成人免费电影| 中国性猛交xxxxx免费看| 久久久亚洲精品国产| 91香蕉视频免费| v片免费在线观看| 亚洲春色另类小说| 亚洲精品99久久久久中文字幕 | 四虎成人精品永久免费AV|