`
sslaowan
  • 浏览: 379740 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面关闭弹出提示并注销登录(兼容主流浏览器)

 
阅读更多

这是多么普遍而又正常的需求啊,然而在多浏览器时代,这又是多么难做啊~~(我不是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,我起初不知道,因为使用了一个开源的产品,找遍了它所有的代码想解除绑定或者屏蔽那个确认框,后来才发现原来是浏览器内置的!

    其用法如下:
    

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

 
    注意这个地方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'>

	     function getOs(){
          if(navigator.userAgent.indexOf("MSIE")>0)return 1;//IE
          if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2;//Firefox
		  if(isSafari=navigator.userAgent.indexOf("Chrome")>0)return 3;//Chrome
          if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 4;//Safari
          if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 5;//Camino
          if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 6;//Gecko
		  if(isOpera=navigator.userAgent.indexOf('Opera') >= 0) return 7;//Opera
           //other...
          return 0;
          }
	     
	     var quite=false;
		 
		 		 
		 function bindOnbeforeunload(){
		    quite=false;
		    window.onbeforeunload=checkLeave;
		 }
	     
		 function unbindOnbeforeunload(){
		     quite=true;
			 window.onbeforeunload=null;
		 }
		 
		 
		 
		 function checkLeave(){				
			     return '您正在离开...';		
        }
	
 
	  window.onunload=function(){
	       try{
	         unbindOnbeforeunload();
              }catch(e){
			  
			  }
				window.location.href='/Logout';				 
			    if(getOs()==3||getOs()==4){
				    var xmlHttp = false;
				try {
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e2) {
						xmlHttp = false;
					}
				}
				if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
	            xmlHttp = new XMLHttpRequest();
				}
				var url = "/Logout";
				xmlHttp.open("POST", url, false);
				// Send the request
				xmlHttp.send(null);
				   window.open('', '_self', ''); //bug fix
                                   window.close();
				}
			    
			 
			 
	  }
	  
	 
	 
	</script>
	</head>

	

 

     在HTML body中注册:

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

分享到:
评论
3 楼 sslaowan 2012-05-21  
snafm 写道
试过了,chrome15不兼容,没反应

写这篇文章时还没有chrome15呢吧。现在不负责这块了,没有后续跟进
2 楼 snafm 2012-05-16  
试过了,chrome15不兼容,没反应
1 楼 zhangskills 2011-08-21  
不错不错,赞一个,我也做java的,没事学一下前端,哈哈

相关推荐

    javaweb用户注销后点击浏览器返回刷新页面重复登录问题的解决方法

    在Java Web开发中,用户登录和注销功能是核心部分,而用户注销后点击浏览器的返回按钮,导致页面刷新并重新登录的问题是一个常见的困扰。这个问题的出现主要是由于浏览器缓存了用户登录时的表单信息,当用户注销后,...

    微信QQ内置浏览器打开网址跳转提示页面美化版.zip

    下面是使用教程: 源码介绍 自己的域名总是被举报,变红? 搞一个遮罩(跳转浏览器提示)就OK了 迷惑性问题: 问:这个干什么用的。...当不再使用或者需要临时关闭跳转时,只需//注销该行代码即可。

    浏览器卡死修复(免注销免重启会误报)

    在这种情况下,"浏览器卡死修复(免注销免重启会误报)" 提供了一个解决方案,尤其适用于那些不想注销账户或重启计算机的用户。该软件使用易语言编写,这是一种中国本土的编程语言,旨在降低编程难度,但这也意味着...

    c# 注销按钮返回登录

    2. **重定向**:将用户重定向到登录页面或其他指定页面。 3. **清除缓存**:确保用户在退出后不会因为浏览器缓存而保留部分登录状态。 #### 清除客户端页面缓存的重要性 当用户注销时,如果浏览器中还保留了之前的...

    C#弹出广告杀手

    【C#弹出广告杀手】是一款使用C#编程语言开发的应用程序,它的主要功能是自动关闭Internet Explorer浏览器中的弹出窗口。程序运行于系统托盘,通过定时检测和关闭新弹出的IE窗口,以及支持用户自定义热键来即时关闭...

    系统登录注销 适合登录注销

    4. 用户提示:向用户显示注销成功的信息,并返回登录界面。 系统登录注销的重要性体现在多个方面: 1. 安全性:防止未经授权的访问,保护用户数据不被泄露。 2. 隐私保护:用户可以清楚自己的活动痕迹,避免个人...

    解决登录注销后退失效

    在执行完上述操作后,将用户重定向至登录页面,进一步确保用户无法直接通过后退按钮回到之前的已登录状态页面。 #### 实现原理与注意事项 - **Session机制**:Session存储着用户的登录状态和其他重要信息。在用户...

    vue实现简单的登录弹出框.docx

    Vue 实现简单的登录弹出框 本文主要介绍了如何使用 Vue 框架实现一个简单的登录弹出框,涵盖了 CSS、HTML 和 JS 三个方面。下面是对每个部分的详细解释: CSS 在 CSS 部分,我们定义了几个样式来实现登录弹出框的...

    Android记住密码自动登录,注销

    - **重新加载页面**:注销后,应强制刷新页面或重定向到登录界面,防止用户意外访问已注销的个人数据。 4. **安全性考虑**: - **安全的密码输入**:使用EditText的inputType属性设置为textPassword,隐藏输入的...

    WIN7系统,XP系统让电脑关机时弹出提醒框提醒打卡.docx

    此方法主要是通过创建一个简单的VBScript脚本来实现弹出消息框的功能,并通过组策略编辑器将该脚本与关机或注销事件关联起来。下面将详细介绍这两种系统的具体实现步骤。 #### 三、XP系统实现步骤 ##### 1. 创建...

    注销后浏览器后退按钮问题

    5. **重定向策略**:在用户成功注销后,不要仅仅显示一个注销成功的消息,而是应该立即将用户重定向到登录页面或者其他非敏感页面,避免用户点击后退按钮返回到之前的状态。 6. **使用HTTPOnly Cookie**:将用户的...

    ssh做的登录 注册 注销

    SSH(Struts2 + Spring + Hibernate)是一个经典的Java Web开发框架,它整合了三大主流开源框架,用于构建高效、可维护的Web应用。这个压缩包文件可能是为了教学或实践目的,包含了实现SSH框架下登录、注册和注销...

    定时注销Windows用户

    Windows系统多用户登录后远程断开,用户占用内存,需要注销远程断开用户. Windows系统多用户登录后远程断开,用户占用内存,需要注销远程断开用户. Windows系统多用户登录后远程断开,用户占用内存,需要注销远程...

    UC浏览器多百度ID登录技巧 教程

    3. **第三个百度ID**:同样地,使用第三个UC浏览器登录第三个百度ID。 这样,每个浏览器都将保持各自的登录状态,无需频繁注销和重新登录。 ##### 巧用UC快捷键 UC浏览器提供了丰富的快捷键功能,可以帮助用户更...

    模拟app注销登录

    3. **更新视图状态**:界面应该实时反映用户的状态变化,因此在注销成功后,应关闭当前用户界面,并显示登录页面。这通常涉及到导航控制器的管理,例如在iOS中,可以使用`popToRootViewController`方法回退到栈底的...

    21-09-11_Nop_4.40.3(027_登录注销定义实现,所有页面正常显示).rar

    4. **页面重定向**:登录和注销操作后,用户可能会被重定向到特定的页面,例如登录后的主页或注销后的登录页面,这需要正确的URL管理和配置。 5. **异常处理**:在实现过程中,开发者可能考虑了各种可能出现的错误...

    PHP登录Cookie保持登录注销登录全套源码

    `setcookie()`函数用于创建Cookie,其中可以设置过期时间,使Cookie在用户关闭浏览器后仍能保留一段时间。在用户下次访问时,可以通过检查这个Cookie来自动登录。 5. **注销登录**:`logout.php`文件处理用户的登出...

    WINXP系统每次登录就直接注销怪问题的解决

    标题中的问题直指Windows XP系统在用户登录时自动注销的现象,这是一个常见的系统故障,可能导致用户无法正常使用操作系统。描述中提到的作者在安装了WINCC6.0软件后遇到了这一问题,经过一番研究和尝试,最终找到了...

    spring mvc实现登录账号单浏览器登录

    使用 Spring MVC 实现登录账号单浏览器登录需要使用 LoginListenner 监听类、login 登录方法以及在 web.xml 中配置监听类 LoginListenner。通过这种方式,我们可以实现在同一时刻,只允许一个账号同时只能在一个...

    兼容IE,火狐的收藏本页

    ### 兼容IE与火狐等主流浏览器的“收藏本页”功能实现 在Web开发领域,确保网页在不同浏览器中的兼容性是一项重要的任务。本文将深入探讨如何实现在Internet Explorer(IE)与Mozilla Firefox(火狐)浏览器中兼容...

Global site tag (gtag.js) - Google Analytics