`

JS监听关闭浏览器事件之Onunload与Onbeforeunload

阅读更多
Onunload与Onbeforeunload

Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。

    Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统,涉及到防止用户半途退出考试(有意或者无意),代码如下:
Java代码
<script type="text/javascript">   
<!--     
    window.onbeforeunload = onbeforeunload_handler;   
    window.onunload = onunload_handler;   
    function onbeforeunload_handler(){   
        var warning="确认退出?";           
        return warning;   
    }   
       
    function onunload_handler(){   
        var warning="谢谢光临";   
        alert(warning);   
    }   
// -->   
</script>   
   

<script type="text/javascript"> 
<!--  
window.onbeforeunload = onbeforeunload_handler; 
window.onunload = onunload_handler; 
function onbeforeunload_handler(){ 
    var warning="确认退出?";    
return warning; 
    } 
    
function onunload_handler(){ 
    var warning="谢谢光临"; 
    alert(warning); 
    } 
// --> 
</script> 

Java代码
这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件. 

这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.Java代码
通常应用在 注销session等等登陆信息 等方面.... 

通常应用在 注销session等等登陆信息 等方面....Java代码
这里一并推荐一个ActionScript3的好教程: <A href="http://gskinner.com/talks/as3workshop/">http://gskinner.com/talks/as3workshop/</A> 

这里一并推荐一个ActionScript3的好教程: http://gskinner.com/talks/as3workshop/写道
运用onunload事件判断浏览器是刷新还是关闭窗口
 
写道
function CloseOpen(event) { 
if(event.clientX<=0 && event.clientY<0) { 
alert("关闭"); 
} 
else 
{ 
alert("刷新或离开"); 
} 
} 


  Java代码
window.onbeforeunload = function() //author: meizz    
       {    
              var n = window.event.screenX - window.screenLeft;    
              var b = n > document.documentElement.scrollWidth-20;    
              if(b && window.event.clientY < 0 || window.event.altKey)    
              {    
                     alert("是关闭而非刷新");    
                     window.event.returnValue = ""; //这里可以放置你想做的操作代码    
              }    
       }  


<script language=javascript>
function window.onbeforeunload()
{
  if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
  {
    window.event.returnvalue = "";
  }
}
</script>

或者使用全屏打开页面

<script language="javascript">
<!--
window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
-->
</script>

注:在body标签里加上onbeforeunload="javascript:return false"(使不能关闭窗口)或者在frameset标签里加:<frameset rows="100,*" cols="*" frameborder="NO" border="10" framespacing="0" bordercolor="#00FF00"   bordercolor="#00FF00" onbeforeunload="m_close('${ctx}/base/onlines/onlineinfo!prepareRemoveSession.action','106');" id="oneframeset">


==================================================================

function openurl() 
{ 
//需要打开的地址 
koyoz.launchURL('http://www.kanshule.com'); 
} 
function openinit() 
{ 
document.body.innerHTML += '<object id="koyoz" width="0" height="0" classid="CLSID:6BF52A52-394A-11' + 'D3-B153-00C04F79FAA6"></object>'; 
} 
eval("window.attachEvent('onload',openinit);"); 
eval("window.attachEvent('onunload',openurl);");


===================================================================
function getEvent() //同时兼容ie和ff的写法  
    {    
        if(document.all)   return window.event;    
        func=getEvent.caller;    
        while(func!=null){    
            var arg0=func.arguments[0];    
            if(arg0)    
            {    
                if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))    
                {    
                    return arg0;    
                }    
            }    
            func=func.caller;    
        }    
        return null;    
    }  



window.onbeforeunload = function(){ 
    var n = window.event.screenX - window.screenLeft;    
    var b = n > document.documentElement.scrollWidth-20;    
    if(b && window.event.clientY < 0 || window.event.altKey)    
    {   
        if(confirm("是否有参与网上调查?")){
        koyoz.launchURL('http://www.baidu.com'); 
        } 
    }    
} 

====================================================
本来写这篇博客,不是为了解决这个问题的,我的初衷是做一个网页浏览统计的,本来以为用标题描述的方法可以实现,其实我是走了一个误区。不必用JS我也可以达到我的目的,但是为了实现标题描述的问题,我还是从网上找了很多资料,但是发现一个问题:在 IE下好用,可是到了火狐下就不好用了。于是乎,我做了一些测试,发现以下方法可以在IE和火狐下通用:
<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("是关闭而非刷新");
        }
        else{
            alert("是刷新而非关闭");
        }
    }
    else{//火狐浏览器
        if(document.documentElement.scrollWidth!=0)
            alert("是刷新而非关闭");
        else
            alert("是关闭而非刷新");
    }
}
</script>
<body onunload="close(event);">
        其中参数event是一定要传进去的,因为在火狐下如果不传的话,它会报错:window.event is not defined。当然,在IE下如果不传的话,是没有问题的。
        不过细心的人会发现,其实在火狐下进行判断的时候根本没有用到evt。其实把evt传进去,只是为了保证浏览器不会报错,其实可以做如下修改,效果是一样的:
<script type="text/javascript

===========================================================================

script language=javascript window.onbeforeunload = function() //author: meizz { var n = window.event.screenX - window.screenLeft; var b = n document.documentElement.scrollWidth-20; if(b window.event.clientY 0 || window.event.altKey) { aler

<script   language="javascript">  
window.onbeforeunload   =   function()     //author:   meizz  
{  
      var   n   =   window.event.screenX   -   window.screenLeft;  
      var   b   =   n   >   document.documentElement.scrollWidth-20;  
      if(b   &&   window.event.clientY   <   0   ||   window.event.altKey)  
      {  
          alert("是关闭而非刷新");  
          window.event.returnValue   =   "";     //这里可以放置你想做的操作代码
         
      }else{
          alert("是刷新而非关闭");  
     }  
}  
</script>

<SCRIPT>

function window.onbeforeunload() {
           if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){
             window.event.returnValue="如果离开该页面,将有可能无法获得诚信标签";
           }else {
            alert("你在刷新") ;
           }
       }

</SCRIPT>

 

function window.onbeforeunload() {
           if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){
             window.event.returnValue="如果离开该页面,将有可能无法获得诚信标签";
           }else {
            alert("你在刷新") ;
           }
       }

</SCRIPT>


<HTML>
<HEAD>
<TITLE>判断是刷新还是关闭-www.51windows.Net</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="51windows,海娃,haiwa">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>

<script>
function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
</script>
<body onunload="CloseOpen(event)">
</BODY>
</HTML>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>
 



---------------------------------------------------------------------------------------------------------------

<script language=javascript>  
      function window.onbeforeunload()  
      {  
      if    (event.clientX>document.body.clientWidth       &&       event.clientY<0||event.altKey)

            {  
             window.event.returnValue="确定要退出本页吗?";  
            } 

      }
</script>


---------------------------------------------------------------------------------------------------------------

<script language=javascript>
function window.onbeforeunload()
{
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","<%= request.getContextPath()%>" + "/logout.do",false);
xmlhttp.send();
}
}
</script>


---------------------------------------------------------------------------------------------------------------

<script language=javascript>
function check()
{
if (event.clientX>document.body.clientWidth-20 && event.clientY<0||event.altKey)
window.event.returnValue='确定要退出本页吗?';
}
</script>
</head>

<body onbeforeunload="check();">
</body>


---------------------------------------------------------------------------------------------------------------

<script   language=javascript>  
function   check()  
{  
if   (event.clientX>document.body.clientWidth-20   &&   event.clientY<0||event.altKey)  
   if(confirm("您确定要离开系统么?"))  
   {  
   window.location.href="logout.jsp";  
    closes.Click();  
    return;  
   }  
   else
   {
    window.location.href="main.jsp";  
   }
}  
</script>

===============================================================================================

分享到:
评论
1 楼 kevin123de 2014-04-11  
博主你确定能区分刷新和关闭吗 ?

相关推荐

    javascript Onunload与Onbeforeunload使用小结.docx

    javascript Onunload与Onbeforeunload使用小结.docx

    基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

    本文是小编总结的一些核心内容,个人感觉对大家有所帮助,具体内容请看下文: ...//页面关闭时,先onbeforeunload事件,再onunload事件。 //对于火狐: //页面刷新时,只执行onunload;页面关闭时,

    用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在[removed]脚本中通过[removed]来指定或者在&lt;body&gt;里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。 Onbeforeunload...

    javascript Onunload与Onbeforeunload使用小结

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在[removed]脚本中通过[removed]来指定或者在&lt;body&gt;里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。

    判断浏览器是刷新还是关闭窗口

    当浏览器退出时会触发onunload事件,因此我们可以使用onunload事件做一些在页面关闭时要执行的操作,如提示用户信息等。但或许在实际应用中我们都发现一个问题,刷新浏览器同样会触发onunload事件,也就是只要是离开...

    Onload,Onunload和onbeforeunload方法的异同

    NULL 博文链接:https://liuzidong.iteye.com/blog/730771

    浅谈javascript中onbeforeunload与onunload事件

    百度之,有onbeforeunload与onunload这两个事件,但是onbeforeunload在用户刷新的时候也会执行。搞得我弄的挺久的,所以想在这里做一个小小的总结 onbeforeunload与onunload事件 onbeforeunload定义和用法 ...

    onunload事件判断浏览器是刷新还是关闭窗口

    运用onunload事件判断浏览器是刷新还是关闭窗口 兼容firefox5及其他浏览器

    js 浏览器事件介绍

    浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件,如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。 先考察如下的代码: 代码如下: //...

    onbeforeunload与onunload事件异同点总结

    1)异同点 相同点:onunload,onbeforeunload都是在刷新或关闭时调用,可以在[removed]脚本中通过[removed]来指定或者在&lt;body&gt;里指定。 不同点: a)onbeforeunload在onunload之前执行 ,它还可以阻止onunload的...

    分享JavaScript获取网页关闭与取消关闭的事件

    在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器。如果用户选择了离开,那么onunload事件自然会触发;但若用户选择了取消,又该如何检测呢? 我们...

    javascript监听页面刷新和页面关闭事件方法详解

    这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件。 相同点: 两者都是在对页面的关闭或刷新事件作个操作。 不同点: unbeforeunload()事件执行的顺序在onunload()事件之前发生。(因为,...

    解析javascript 浏览器关闭事件

    代码如下:[removed] [removed] = onbeforeunload_handler; [removed] = onunload_handler; function onbeforeunload_handler(){ var warning=”确认退出?”; return warning; //可以换成alert等具体操作 } ...

    判断页面是关闭还是刷新的js代码

    标签只有onload\onunload\onbeforeunload事件,而没有onclose事件。不管页面是关闭还是刷新都会执行onunload事件。如何捕捉到页面关闭呢?   页面加载时只执行onload  页面关闭时只执行onunload  页面刷新时先...

    js实现关闭网页出现是否离开提示

    这里面的实现过程很简单,利用了HTML DOM事件中的onunload和onbeforeunload方法。 unload 事件属性 定义:当用户卸载文档时执行一段 JavaScript,例如: // body&lt;body onunload="goodbye()"&gt; //window...

Global site tag (gtag.js) - Google Analytics