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

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。

Python + Playwright(19):监听事件 & 移除监听事件「详细介绍」 Playwright 支持对页面事件监听与移除,使得复杂的测试场景能够轻松实现;本篇文章教小伙伴们如何使用Playwright来监听各种事件,并在必要时移除这些事件监听器,确保测试脚本的健壮性和灵活性。 阅读详情

相关推荐

点击确认与取消的艺术:JavaScript中的用户交互

本文介绍了如何通过JavaScript优化网页应用中用户确认操作的交互体验。针对表单提交时确认对话框的触发问题,提出了使用jQuery在DOM加载后绑定事件、移除内联onclick属性、采用事件代理等解决方案。通过修改按钮名称、正确处理确认返回值,确保当用户取消时不执行后续操作。实例代码演示了如何实现安全可控的删除确认功能,既提升了用户体验又增强了操作安全性。

m0_62153576的博客 68

关闭浏览器时退出账号的复杂处理

关闭浏览器时退出账号的复杂处理经典做法问题进一步问题需要注意问题 经典做法 众所周知,为了账户安全,用户未主动点击注销系统时,直接关闭浏览器或标签页强制退出系统的方法: // 关闭时调用注销接口 window.onbeforeunload = function() { //执行注销ajax调用,简单示例 $.ajax({url:"/logout"}); }; 问题 此方式有严重问题, 会造成...

hyz1840的博客 2752

5、网页开发:从高级 CSS 到事件管理系统的数据模型规划

本文探讨了网页开发中从高级 CSS 技术到事件管理系统数据模型规划的完整流程。详细介绍了使用 CSS 创建动态轮播图的技术实现,以及为建筑公司设计和开发符合 OSHA 标准的事件管理系统的全过程。内容涵盖敏捷用户故事与验收标准、数据模型设计、表格关系、权限配置以及 Dataverse 中的表格创建步骤,为开发者提供了全面的技术参考和实践指导。

code8的博客 53

c# 统计当前在线人数_如何处理对非法关闭浏览器 ajax,计算系统当前在线人数(解决浏览器关闭不调用sessionDestroyed方法)...

编写SessionCounter类实现HttpSessionListener接口:public class SessionCounter implements HttpSessionListener {private static int activeSessions = 0;public void sessionCreated(HttpSessionEvent se){activeSessio...

weixin_36086032的博客 452

论文分享 - OctoMap八叉树建图原理

论文:OctoMap:An Efficient Probabilistic 3D Mapping Framework Based on Octrees。

一只废佐_的博客 2539

Linux运维人,该醒醒了,2019年要变天了

外界都说运维只是处于被动低效率手工救火的状态,企业对其重视程度不高,提起运维很多人能联想到的字眼就有“苦逼”、“辛苦”、“加班”、“背锅”。在大数据、人工智能、容器技术的强力加持下,运维这个传统的技术工种已经从“机械劳动”这样的刻板印象中蜕变出来,成为了任何一家技术公司所必须依赖和大力投入的核心技术能力。 现在,运维人员的发展前景也开始让很多程序员眼羡,作为Linux运维人员的你:这一年,你的L...

qq_43083284的博客 1万+

关闭浏览器按钮退出系统问题

<br />Top.aspx页面:<br /><body onunload="LogOut()"><br /></body><br /> <br /><script type="javascript/text" ><br />function LogOut()<br /> {<br />  var c= Ufida.T.UI._top.RecordLogOut();<br />   <br /> }<br /></script><br /> <br />Top.aspx.cs:<br /> name

Xavier Yang's Blog 1045

单细胞分析进阶:sctransform标准化在Seurat中的实战解析

本文深入解析了sctransform标准化方法在Seurat单细胞分析中的实战应用。通过对比传统对数标准化,sctransform能更有效地建模并剔除技术噪音,提升数据质量。文章提供了从环境配置、数据准备、核心参数解析到完整流程整合的详细指南,并针对常见问题给出解决方案,帮助研究者获得更清晰的细胞分群和更可靠的差异表达结果。

weixin_29248313的博客 151

关闭浏览器前提示用户确认是否关闭的两种方案

方法一: (网上定义为目前最佳解决方案) function window.onbeforeunload() { if(event.clientX>360&&event.clientY {     window.event.returnValue="提示:\“退出系统\”请点系统的\“安全退出\”!"; } } 特点:1、只有点右上角X的时候弹出提示,让用户确认(是否关

jiangyanli199101的专栏 1576

YOLO学习笔记 | YOLOv8与卡尔曼滤波实现目标跟踪与预测(附代码)

YOLOv8采用改进的CSPDarknet骨干网络和动态标签分配策略,提供高精度、实时的目标检测能力。使用IOU(交并比)或马氏距离作为代价矩阵,通过匈牙利算法匹配预测框与检测框,解决多目标ID分配问题。卡尔曼滤波通过状态方程和观测方程对目标运动建模,结合预测与观测数据优化状态估计。完整代码需结合具体场景调整参数,并补充匈牙利算法实现(可参考。匈牙利算法(Hungarian Algorithm)是解决。的高效方法,常用于目标跟踪中的。),作为跟踪的输入观测值。(将检测框与预测框匹配)。

尘世冰封的专栏 1250

在线考试题库抓取:Python 爬虫抓取各类在线考试平台题库和试题

通过这些技术,您可以抓取各类在线考试平台上的题库数据,进行数据分析、生成练习题集,甚至用于考试准备。为了演示抓取过程,本篇博客选择了两个常见的在线考试平台进行数据抓取:一个是教育考试平台(如“中小学题库”),另一个是职业考试平台(如“华图教育”)。对于这些网站,我们需要找到包含题库信息的页面,并分析每一页的 HTML 结构,从而定位到题目、选项、答案等数据。大多数在线考试平台的题库是分页显示的,因此我们需要遍历多个页面,抓取所有的题库数据。因此,我们需要设置合适的请求头来模拟真实的浏览器请求。

2201_76125261的博客 3438

页面关闭时间触发的事件

var _t; window.onbeforeunload = function() { setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0); return "真的离开?"; } window.onunloadcancel = function() { clearTimeout(_t...

u010985901的专栏 642

Raspberry Pi Pico SDK开发-Timer-定时

RP2040 由 Raspberry Pi 设计,具有双核 Arm Cortex-M0+ 处理器和 264KB 内部 RAM,并支持高达 16MB 的片外闪存。 广泛的灵活 I/O 选项包括 I2C、SPI 和独特的可编程 I/O (PIO)。 本实例将演示如何使用Timer的定时功能。

视觉与物联智能 2040

在用户关闭网页时捕捉关闭事件,并进行清除session操作

var flag=false;  function window.onbeforeunload()  {    var   n   =   window.event.screenX   -   window.screenLeft;     var   b   =   n   >   document.documentElement.scrollWidth-50;     if(b   &&   w

水中鱼的专栏 1631

ARFoundation系列讲解 - 24 锚点

一、添加平面检测和平面可视化 请参考 ARFounnation快速入门-08平面检测 案例 二、添加射线检测 1.在AR Session Origin 组件上添加ARRaycastManager 脚本

a451319296的博客 4877

YOLOv8改进---BiFPN特征融合

yolov8结合BiFPN进行改进

qq_41920323的博客 4523

js捕捉浏览器关闭事件onbeforeunload

<script type="text/javascript"> var READYTOPROCESS = false; window.onbeforeunload = function closeWindow(e) { if (!READYTOPROCESS) { //message to be returned to the popup box. ...

tiger_Angle 1508

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

兼容性强的js捕捉网页刷新关闭退出事件的方法

当我们离开一个网页时,往往需要提醒用户自己的这一行为,比如我正在编辑一个文档,或者我是在使用网上银行,我希望在自己操作失误之后能给我一次改正的机会。这里说道的离开一个网页,其实分为好几种情况:刷新 关闭 后退我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器。如果用户选择了离开,那么onunload事件自然会触发;但若用户选择了取消(或者是...

weixin_30455023的博客 157

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

java 判断浏览器关闭_js判断浏览器是否关闭

今日整到此处,特将网上搜刮来的信息贴于此,以供大家共享之window.onbeforeunload = function(){ var n = window.event.screenX - window.screenLeft;var b = n > document.documentElement.scrollWidth-20;if(b && window.event.c...

weixin_35828338的博客 794

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

f11全屏,h5的全屏api失效,f11/Esc取消全屏无法监听的解决

控制全屏和取消全屏文件proFn.js class Profn{ constructor(vue,obj){ } } // 设置 全屏 Profn.fullPage = function (element) { //某个元素有请求 var requestMethod =element.requestFullScreen ||element.webkitRequestFullScreen //谷歌 ||element.mozRequestFullScreen

qq_43563070的博客 3440

js判断浏览器是否关闭

今日整到此处,特将网上搜刮来的信息贴于此,以供大家共享之 window.onbeforeunload = function()    {   var n = window.event.screenX - window.screenLeft;           var b = n &gt; document.documentElement.scrollWidth-20;        if(...

wyz191的专栏 700

vue element-ui 导航做全屏/取消全屏功能

先上效果图 html部分代码: <!-- 全屏 --> <span class="user" @click="toggleFullScreen"> <el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏':'全屏'" placement="bottom"> <i :class="isFullScreen ? '

IT博客技术分享 2627

Java 理论与实践: 处理 InterruptedException

Java 理论与实践: 处理 InterruptedException 注:这里仅转了文章开头部分内容,详细内容请查看原网页。 这样的情景您也许并不陌生:您在编写一个测试程序,程序需要暂停一段时间,于是调用Thread.sleep()。但是编译器或 IDE 报错说没有处理检查到的 InterruptedException。InterruptedException 是什么呢,为什么

flysharkym的专栏 1088

js离开当前页面时触发的函数

js离开当前页面时触发的函数: window.onbeforeunload=fun() ; function fun(return 'msg';) ; 这样子在浏览器在捕捉到页面即将离开的时候就会弹出提示框,显示msg的内容,询问你确定或者取消 目前三大主流浏览器中firefox和IE都支持onbeforeunload事件 另外还有一个相似的函数Onunload: Onunlo

iBenxiaohai123的博客 1万+
上一篇: session监听
下一篇: JS打印
MyJavaBlog
博客等级 码龄16年 11粉丝 126原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值