`
everlxq
  • 浏览: 108649 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

页面关闭时间触发的事件

 
阅读更多
<script language="JavaScript">
var _t;
window.onbeforeunload = function()
{
    setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
    return "真的离开?";
}
window.onunloadcancel = function()
{
    clearTimeout(_t);
    alert("取消离开");
}
</script>

验证可以


复杂点的】-》

<script language="javascript">
window.onbeforeunload = function()  
{  
      if(!(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey))  
      {  
  //在刷新、或以_self方式转到其它页面、或用ALT+CTLR+DEL关闭时触发; 
  //代码
       }
      else
      {
         //点击工具栏上的[X]按钮、或ALT+F4关闭时触发
      }
}
</script>

window.onbeforeunload  =  function()  
       {  
            if((event.clientX>document.body.clientWidth&&event.clientY<0)||event.altKey)  
            {         
                 //alert("关闭触发");
            }
            else
            {
                 //alert("刷新触发");
            }
        }


验证不好使




详解


捕捉网页关闭与取消关闭事件
2011-07-04
在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器。如果用户选择了离开,那么onunload事件自然会触发;但若用户选择了取消,又该如何检测呢?
我们假定一个页面离开取消事件,叫做onunloadcancel。显然,这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程:
window.onbeforeunload = function()
{
    return "真的离开?";
}
当用户准备离开页面(比如按下关闭按钮,或者刷新页面等等),onbeforeunload事件触发。我们的脚本无法在这个事件里决定是否阻止页面的关闭,唯一能做到的只有返回一个字符串,这个字符串仅作为说明文字出现在关闭选择对话框里,用户可以选择关闭,或者不关闭。但究竟选择哪个,我们无从得知。
然而仔细分析下这个问题,其实不然。 如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。
<script language="JavaScript">
window.onbeforeunload = function()
{
   setTimeout(onunloadcancel, 10);
    return "真的离开?";
}
window.onunloadcancel = function()
{
    alert("取消离开");
}
</script>
我们使用setTimeout,延时10ms执行onunloadcancel。如果页面真关闭了,定时器当然都销毁;反之继续。但在测试中,发现FireFox有个两个BUG:
有时按下关闭按钮,也会执行onunloadcancel,并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死,这说明onunloadcancel确实是执行了,只是销毁了界面,但并没有暂停脚本的运行。
如果是通过刷新页面的方式离开,仅执行一次onbeforeunload,但点击X按钮关闭页面,会执行两次onbeforeunload。因此我们还需在完善下,以便兼容FF。
<script language="JavaScript">
var _t;
window.onbeforeunload = function()
{
    setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
return "真的离开?";

}
window.onunloadcancel = function()
{
    clearTimeout(_t);
    alert("取消离开");
}
</script>
这里使用了一种我也说不出原因的办法,应该算是hack,解决了FF下的bug。
分享到:
评论

相关推荐

    laydate时间控件及触发时间校验事件

    laydate是一款广泛应用于前端开发中的JavaScript日期时间插件,它提供了丰富的配置选项和灵活的API接口,使得在网页中添加日期、时间选择功能变得简单易行。本篇将深入探讨laydate时间控件的使用方法以及如何触发...

    关闭浏览器触发 sesstion__end 来统计减少了客户端访问人

    有很多网友提到 ,sesstion 到时间会触发 sesstion__end 来统计减少了客户端访问人,对于这样的问题网络上都含糊不清,这里告诉大家一个方法 1 在 config 页面中写入代码 2 建立一个关闭浏览器页面...

    JS区分浏览器页面是刷新还是关闭

    然而,仅仅使用onbeforeunload事件并不能完全区分页面是刷新还是关闭,因为用户刷新页面时,也会触发该事件。 产品经理可能会提出更细致的需求,例如在页面关闭时和页面刷新时提供不同的提示信息,或者在页面刷新时...

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

    - 使用`window.event`来获取触发事件的环境信息,并判断页面是关闭还是刷新。 - 利用`onbeforeunload`事件的返回值来进行判断,如果返回值被设置,则一般表示是关闭页面。 - 检测`onbeforeunload`事件和`onunload`...

    JS网页定时自动关闭-无浏览器提示

    在我们的场景中,我们希望在一段时间后自动关闭网页,因此我们可以将`window.close()`方法放入`setTimeout`的回调函数中。但是,直接使用`window.close()`会引发浏览器的确认对话框,询问用户是否真的要关闭窗口。...

    javascript判断页面是否是刷新还是关闭

    这两个事件都与页面生命周期有关,但它们的触发时间点不同: 1. `beforeunload` 事件:当用户尝试离开当前页面时(如点击刷新按钮、关闭窗口或导航到另一个URL),浏览器会先触发`beforeunload`事件。这是一个预...

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

    对于页面关闭和刷新的事件触发次数问题,通常点击浏览器的关闭按钮(X按钮)会触发两次onbeforeunload事件,而通过刷新页面只会触发一次。这意味着我们需要为这两种情况编写不同的处理逻辑,以确保代码在各种情况下...

    用户停留浏览页面的时间统计

    5. **停止计时**:当用户离开页面或触发其他离开事件(如点击链接、关闭窗口)时,停止计时并保存最终的停留时间数据。 6. **数据上报**:收集到的停留时间数据需要实时或批量发送到服务器,用于后续的数据分析和...

    element ui 对话框el-dialog关闭事件详解

    通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 标题 visible.sync=bind size=small close='closeDialog'&gt; 在标签中加入@close=’closeDialog’ mothods中加入 //关闭弹框的事件 close...

    手机网页(WAP网页)底部悬浮广告代码带抖动/关闭效果

    CSS动画可以定义一组关键帧,描述元素在不同时间点的状态,而JavaScript则可以设置动画的触发时机和频率。在这个例子中,广告框每3秒会执行一次抖动动画,这可能通过设置一个定时器(如`setInterval`函数)来实现,...

    jquery中的ajax方面的方法所触发的完整事件流演示

    6. `ajaxStart`: 当有Ajax请求开始时触发,整个页面只触发一次,适合全局的加载动画。 7. `ajaxStop`: 所有Ajax请求结束时触发,可以用来关闭加载动画。 8. `ajaxSend`: 每次发送Ajax请求时触发,可用于记录日志或者...

    页面加载事件、页面定时任务

    页面加载事件是页面首次加载完成后的触发事件。在JavaScript中,可以通过多种方式来绑定页面加载事件,其中一种常用的方式就是利用jQuery库。 **1. 引入jQuery** 在开始使用页面加载事件之前,首先需要确保项目中...

    js弹出页面窗口和关闭.

    2. **定时关闭**:通过设置定时器,可以在一定时间后自动关闭窗口。这在某些特定场景下非常有用,比如完成某个操作后自动关闭提示窗口。 ```javascript function clock() { i = i - 1; document.title = "本...

    可定时关闭可手动关闭的漂浮窗口

    例如,设定一个特定时间后自动关闭漂浮窗口,代码可能如下: ```javascript var timeoutId = setTimeout(function() { // 关闭漂浮窗口的代码 }, 60000); // 60000毫秒,即1分钟后关闭 // 如果需要取消定时关闭,...

    网页头部自动弹出并定时关闭的广告代码

    为了提供可关闭的功能,代码中通常会包含一个关闭按钮,点击按钮时触发一个JavaScript事件,将广告div元素的`display`属性恢复为`none`,达到隐藏广告的效果。此外,为了让广告可以重播,可以添加一个重新播放按钮,...

    Android实现指定时间定时触发方法

    Android实现指定时间定时触发方法 Android实现指定时间定时触发方法是Android开发中的一种常见需求,通过使用Timer和TimerTask可以轻松实现指定时间的定时触发。下面是实现该功能的详细步骤和知识点: 一、创建...

    定时关闭的对话框-来源:网络

    当计时器达到预设时间,触发事件处理程序,关闭消息框。 具体实现步骤如下: 1. 创建消息框:首先,你需要用适当的语言和库创建一个消息框。在消息框中,可以包括文本、按钮以及图标,这些元素有助于向用户提供...

    记录用户停留时间

    当用户从action.aspx导航到action_to_sql.aspx时,`unload`事件会被触发,我们可以在这里获取到用户在action.aspx的停留时间,并将其发送到服务器进行存储或进一步分析。 实现这一功能的具体步骤可能如下: 1. 在...

    使用javascript验证窗口是关闭还是刷新

    在Web开发过程中,我们常常需要监控用户与网页的交互行为,包括但不限于用户关闭浏览器窗口、刷新页面等动作。这些事件对于网站来说非常重要,可以用于实现各种功能,比如提醒用户保存未提交的数据或者记录用户的...

    JQuery-bootstrap-datetimepicker开始时间小于等于结束时间-相互约束-清除时间

    该函数接收两个参数,`_this`表示触发事件的元素,`setStartDate`是一个布尔值,用于决定是清除开始时间还是结束时间。函数内部根据传入的参数决定是清空开始时间还是结束时间的值。 关于日期时间的约束,如果要...

Global site tag (gtag.js) - Google Analytics