`

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

 
阅读更多

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。

分享到:
评论

相关推荐

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

    在Web开发中,如何捕捉网页的关闭和取消关闭事件,是一个常被提及的问题。通常情况下,我们主要会用到两个事件来实现这个功能:onbeforeunload和onunload。但这两个事件并不能直接区分用户是选择了离开页面,还是...

    如何关闭摄像头的麦克风

    ### 如何关闭摄像头的麦克风:详尽指南与技术解析 在现代科技的快速发展中,摄像头作为连接虚拟世界与现实世界的桥梁,已经成为我们日常生活和工作中不可或缺的一部分。然而,摄像头内置的麦克风有时会带来不必要的...

    JavaScript 捕获窗口关闭事件

    `onunload`事件与`onbeforeunload`类似,但它是在窗口完全关闭后触发的。这意味着我们无法在这个阶段阻止窗口的关闭。通常情况下,`onunload`用于执行一些清理工作,比如释放资源或发送数据到服务器。 ##### 3.1 在...

    编程实现麦克风静音与取消

    在IT领域,编程实现麦克风静音与取消是一项常见的任务,尤其在音频处理或通信软件中。本项目涉及的核心知识点主要包括麦克风控制、混音器编程以及Windows API的使用。 首先,我们要理解“麦克风静音”这个概念。在...

    Altium Designer PCB中如何自动捕捉焊盘中心.pdf

    使用快捷键 Shift+E 来打开或关闭焊盘中心的自动捕捉功能。这种方法的便捷之处在于设计师可以快速切换捕捉状态,当需要精确操作焊盘时,只需按下Shift+E,光标就会自动定位到焊盘中心;而完成操作后,再次按下Shift+...

    C# Winform实现捕获窗体最小化、最大化、关闭按钮事件的方法

    // 用户取消关闭,继续运行窗体 } break; ``` 总之,通过重写WndProc方法并检查WM_SYSCOMMAND消息,我们可以捕获并处理C# Winform窗体的最小化、最大化和关闭按钮事件,从而实现自定义的用户交互逻辑。这为...

    易语言检测鼠标离开事件

    在编程领域,尤其是GUI(图形用户界面)设计中,事件驱动编程是一种...在实际开发中,了解这些基础知识并结合具体的代码实例,能够帮助你更好地理解和运用易语言进行事件驱动编程,尤其是处理与鼠标交互相关的事件。

    Android 解决dialog弹出时无法捕捉Activity的back事件问题

    通过以上两种方式,我们可以在Dialog弹出时仍然捕捉到Activity的Back事件。选择哪种方式取决于你的具体需求和代码结构。值得注意的是,这两种方法都会阻止Dialog的默认行为(即消失),因此在处理完Back事件后,记得...

    鼠标事件列表--html中所有事件的列表

    7. onMouseOut:当鼠标指针离开元素边界时触发,常与onMouseOver一起使用,取消之前的改变。 除了鼠标事件,还有与键盘相关的事件: 8. onKeyPress:当用户按下并释放一个键时触发,通常用于检测字符输入,尤其...

    C# 常见的事件

    - **与Closed的区别**:Closing发生在窗体即将关闭但还未完全关闭时,提供了取消关闭操作的机会。 - **应用场景**:用于确认用户是否真的想关闭窗体,或者执行一些必要的清理工作。 #### DateChanged **触发方式...

    天正给排水常捷键.pdf

    * F11:打开或关闭“对象捕捉追踪” 三、绘图命令快捷键 * A:创建圆弧 * B:定义块 * C:画圆 * E:删除 * F:倒圆角 * G:对相组合 * H:填充 * I:插入 * S:拉伸 * T:文本输入 * W:定义块并保存到硬盘中 * L...

    CAD快捷键大全下载.pdf

    - F3:开启或关闭自动捕捉功能 - F4:启用或关闭三维动态观察器 - F5:启用或关闭等轴测模式 - F6:启用或关闭坐标读数显示 - F7:启用或关闭栅格显示 - F8:启用或关闭正交模式 - F9:启用或关闭栅格捕捉 -...

    天正给排水常用快捷键.pdf

    * F9: 打开或关闭“捕捉”模式 * F10: 打开或关闭“极轴追踪” * F11: 打开或关闭“对象捕捉追踪” 编辑命令 * CTRL + 0: 清除屏幕 * CTRL + 1: PROPERTIES (修改特性) * CTRL + 2: ADCENTER (设计中心) * CTRL + ...

    Protel DXP 快捷键

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

    Android解决dialog弹出时无法捕捉Activity的back事件的方法

    当dialog弹出时,如果设置了`OnCancelListener`,那么当用户按下back键时,系统默认的行为是取消dialog,同时触发`OnCancelListener`。你可以在这个回调方法中添加自定义的处理代码,如下所示: ```java ...

    Android PopupWindow 点击外面取消实现代码

    接下来,我们将`PopupWindow`的`outsideTouchable`属性设置为`true`,这样当用户点击`PopupWindow`外部时,系统会捕捉到这个事件: ```java mPopupWindow.setOutsideTouchable(true); ``` 为了监听`PopupWindow`的...

    CAD快捷键汇总.pdf

    - Ctrl+B:打开或关闭捕捉模式。 - Ctrl+C:复制选择的对象到剪切板。 - Ctrl+D:设置或调整对象捕捉追踪点。 - Ctrl+E:平移视图。 - Ctrl+F:打开或关闭正交模式。 - Ctrl+G:打开或关闭栅格显示。 - Ctrl+...

    cass 命令(cad)

    * CTRL + W:打开/关闭“对象捕捉追踪” * CTRL + X:将对象剪切到剪贴板 * CTRL + Y:重复上一个操作 * CTRL + Z:撤消上一个操作 * CTRL + Shift + C:带基点复制 * CTRL + Shift + S:另存为 * CTRL + Shift + V...

    CAD2008常用命令

    * F9:打开或关闭“捕捉”模式 * F10:打开或关闭“极轴追踪” * F11:打开或关闭“对象捕捉追踪” 二、编辑命令 * CTRL + 0:清除屏幕 * CTRL + 1:PROPERTIES(修改特性) * CTRL + 2:ADCENTER(设计中心) * ...

    AutoCAD命令快捷键汇总.docx

    15. CTRL + F:对象捕捉 - 开启或关闭执行对象捕捉,以捕捉几何对象的关键点。 16. CTRL + G:栅格 - 切换栅格显示,辅助用户进行精确绘图。 17. CTRL + H:PICKSTYLE - 打开或关闭Pickstyle设置,用于控制选择...

Global site tag (gtag.js) - Google Analytics