`

捕捉网页关闭与取消关闭事件

 
阅读更多

javascript捕获窗口关闭事件 有两种方法

1.重新定义 window.onbeforeunload () 事件

window.onbeforeunload = function () {
  alert("关闭窗口");	
}
 

该方法使用于 ie firefox (opera 不行)
alert()事件将会在关闭窗口前执行,你也可以用户决定是否关闭窗口

function window.onbeforeunload() {
if (event.clientX>document.body.clientWidth && event.clientY<0 ||event.altKey)
      window.event.returnValue="确定要退出本页吗?";
}

 

 

IE下 onbeforeunload  刷新 不执行相关操作

 

	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) {
			//alert("是关闭而非刷新");
			window.event.returnValue = "确定要离开?";
		} else {
			alert("是刷新而非关闭");
		}
	}
 

 



2.用onUnload 方法

在body 标签里加入onUnload事件

body onUnload="myClose()"

然后在javascript里定义myClose()方法

但是onUnload方法是在关闭窗口之后执行,不是在关闭窗口之前执行,如果你想在关闭窗口之前做判断,请用第一种方法

在做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。

分享到:
评论

相关推荐

    Protel DXP 快捷键

    Shift + E 打开或关闭删格捕捉功能 Ctrl+G 弹出删格捕捉功能 G 弹出删格菜单 BackSpace 在放置铜线时,删除最后一个拐角 Shift + Spacebar 放置铜线时设置拐角模式 Spacebar 放置铜线时改变铜线的起始/结束模式 Shift...

    抓图工具HyperSnap 6.30.01

    1. 添加了一个关闭 Vista 透明度的选项 (捕捉窗口和活动窗口时)。 2. 修正了打印功能中“打印范围”忽略了“到:”设置、以及打印所有页面直到结尾, 而不管你输入的是什么的问题。 3. 捕捉/窗口功能现在排除了垂直...

    javascript常用对象梳理

    功能:取消enableExternalCapture方法的设置,终止对外部事件的捕捉。 27. handleEvent事件 语法格式: window.handleEvent(event) 功能:触发指定事件的事件处理器。 28. releaseEvent事件 语法格式: ...

    巧用3dmax快捷键,提高作图效率

    巧用3d快捷键,提高作图效率 相信很多朋友用3dmax做图的时候,快捷键不会用,那些快捷键杂,多,繁琐,...a 角度捕捉打开/关闭 Z 最大视窗物体 制作:谷建 时间:2008.1.28 官方网址:www.ydkj400.com

    类似于qq远程桌面监控的程序

    因为近来想写个类似于远程桌面监控的程序,该程序中要用到屏幕捕捉.为实现该程序的一部分功能,做了个小DEMO.程序很简单,用到的技术也不多,只能实现类似qq的截图功能(方法虽然很笨) 程序流程如下: 1.截取整个屏幕...

    好用的protel99se快捷键

    ctrl+backspace——取消前一次的恢复 crtl+g——设定栅格捕捉间距 crtl+m——测量距离 crtl+f——寻找指定的文字 alt+f4——关闭protel spacebar——绘制导线,直线或总线时,改变走线模式 v+d——缩放视图,以...

    Visual C++编程技巧精选500例.pdf

    279 如何使用默认浏览器打开指定网页? 280 如何清除上次登录用户历史记录? 281 如何强制操作系统只执行规定的程序? 282 如何在系统“控制面板/添加删除程序”中添加程序? 283 如何注册COM服务组件? 284 如何取消COM...

    《javaScrip开发技术大全》源代码

    • sample04.htm 在同一个网页中使用不同脚本语言 • sample05.htm 判断浏览器对JavaScript版本的支持情况 • sample06.htm 引用外部JavaScript • sample07.htm 在同一个HTML文档...

    WanAndroid-一位练习时长两年半的安卓练习生根据鸿神提供的WanAndroid开放Api来制作的产品级App,采用Kotlin语言,基于Material Design AndroidX MVP RxJava Retrofit等框架开发,注释超详细,方便大家练手.zip

    收藏文章 收藏网址待办清单 添加清单 编辑清单 删除清单文章网址详情 详情中收藏 分享 浏览器打开全局修改应用主题色全局修改列表的加载动画侧滑返回 可打开与关闭文章在任何地方收藏与取消,其他界面相对应的数据也...

    多功能脚本虚拟机

    如果提供了不被支持的控件,将会结束程序 增加了著名的几个加密 及解密 控件 SEncrypt.DLL 和示例 EncryptFile.sps 增加了窗体关闭时的事件捕捉及取消关闭窗口的能力,同时 所有的 vbscript 窗体过程必须...

    绘易CAD(HYCAD) 版本5.35

    它绘图与编辑手段智能多样。它支持光栅图像的矢量化读入。它提供图库管理和图形工程文件的统一管理方案。它支持多种(DXF,XMG,WMF,DWG,EPS,SLD,CGM,SVG,PDF,PLT,HGL,BMP,JPG,PNG,BMP,QCD)文件格式输入输出。它是绿色...

    autocad命令全集

    108 FIND   查找与替换文件 109 FOG   三维渲染的雾度配置 110 GRAPHSCR   在图形窗口和文本窗口间切换 111 GRID   显示栅格 112 GROUP G或-G 创建一个指定各称的目标选择组 113 HATCH –H 通过命令行进行区域...

    Visual C++程序开发范例宝典(光盘) 第四部分

    实例174 控制光驱的弹开与关闭 实例175 启动控制面板 实例176 为程序添加快捷键 6.5 系统监控 实例177 检测系统启动模式 实例178 内存使用状态 实例179 监视剪贴板内容 实例180 利用钩子技术实现键盘监控 ...

    Visual C++程序开发范例宝典(光盘) 第八部分

    实例174 控制光驱的弹开与关闭 实例175 启动控制面板 实例176 为程序添加快捷键 6.5 系统监控 实例177 检测系统启动模式 实例178 内存使用状态 实例179 监视剪贴板内容 实例180 利用钩子技术实现键盘监控 ...

    改名“脚本魔术师”

    增加了窗体关闭时的事件捕捉及取消关闭窗口的能力,同时 所有的 vbscript 窗体过程必须写为 function 形式,对原有的 sub 形式不再支持 2007-6-2 VER 1.3.0.63 1.增强了同一脚本程序的多脚本语言功能...

    Foxpro 开发答疑160问

    6. 如何设计错误捕捉程序 9 7. 如何实现程序的背景音乐 14 8. 如何把金额由数字变成大写 17 9. 如何制作拖动功能 19 10. 如何进行高级密码处理 23 11. 如何把文字转换成首位拼音码 27 12. 如何防止程序的多次...

    Visual C++ 程序开发范例宝典 源码 光盘 part2

    cc实例172 隐藏.c显示Windows任务栏 6.4 系统相关设置 cc实例173 获得Windows和System的路径 cc实例174 控制光驱的弹开与关闭 cc实例175 启动控制面板 cc实例176 为程序添加快捷键 6.5 系统监控 cc...

    Visual C++程序开发范例宝典(PDF扫描版).part3

     cc实例174 控制光驱的弹开与关闭   cc实例175 启动控制面板   cc实例176 为程序添加快捷键   6.5 系统监控   cc实例177 检测系统启动模式   cc实例178 内存使用状态   cc实例179 监视剪贴板...

    Visual C++程序开发范例宝典(PDF扫描版).part2

     cc实例174 控制光驱的弹开与关闭   cc实例175 启动控制面板   cc实例176 为程序添加快捷键   6.5 系统监控   cc实例177 检测系统启动模式   cc实例178 内存使用状态   cc实例179 监视剪贴板...

    C#全能速查宝典

    《C#全能速查宝典》共分为8章,分别介绍了C#语言基础、Windows窗体及常用控件、Windows高级控件、控件公共属性、方法及事件、数据库开发、文件、数据流与注册表、GDI+绘图技术和C#高级编程,共包含562个C#编程中常用...

Global site tag (gtag.js) - Google Analytics