博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用onbeforeunload事件检测窗口是否刷新或关闭
阅读量:5831 次
发布时间:2019-06-18

本文共 1843 字,大约阅读时间需要 6 分钟。

hot3.png

onunload,onbeforeunload 在页面刷新或关闭时调用,区别在于:

onbeforeunload 是在页面刷新或关闭前触发,这时浏览器并未请求服务器读取新页面,因此onbeforeunload是可以阻止页面更新或关闭的。

onunload 也是在页面刷新或关闭时触发,不过这时浏览器已经向服务器请求读取新页面,因此onunload是无法阻止页面更新或关闭的。

1. onbeforeunload 事件

事件触发时会弹出一个有确定和取消的对话框,确定后才会执行后续事件,否则继续留在本页。

触发于:

  • 关闭浏览器窗口 

  • 通过地址栏或收藏夹前往其他页面的时候 

  • 点击返回,前进,刷新,主页其中一个的时候 

  • 点击 一个前往其他页面的url连接的时候 

  • 调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit. 

  • 当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。 

  • 重新赋予location.href的值的时候。 

  • 通过input type=”submit”按钮提交一个具有指定action的表单的时候。 

可以用在以下元素:

  • BODY, FRAMESET, window

平台支持:IE,Firefox,Chrome,Safari。Opera暂不支持。

例子:

[html]  

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

  2. <html>  

  3.  <head>  

  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  

  5.   <title> 刷新与离开页面检测 </title>  

  6.  </head>  

  7.   

  8.  <body>  

  9.   <script type="text/javascript">  

  10.   window.onbeforeunload = function(){  

  11.     return '你的文章尚未保存';  

  12.   }  

  13.   </script>  

  14.  </body>  

  15. </html>  

2. onunload 事件

事件触发时,会弹出一个只有确定的对话框,点确定后执行后续事件。

触发于:

  • 关闭浏览器窗口 

  • 通过地址栏或收藏夹前往其他页面的时候 

  • 点击返回,前进,刷新,主页其中一个的时候 

  • 点击 一个前往其他页面的url连接的时候 

  • 调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit. 

  • 当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。 

  • 重新赋予location.href的值的时候。 

  • 通过input type=”submit”按钮提交一个具有指定action的表单的时候。 

平台支持:只有IE,其他都不支持。

例子:

[html]  

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

  2. <html>  

  3.  <head>  

  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  

  5.   <title> 刷新与离开页面检测 </title>  

  6.  </head>  

  7.   

  8.  <body>  

  9.   <script type="text/javascript">  

  10.   window.onunload = function(){  

  11.     alert('谢谢下次再来');  

  12.   }  

  13.   </script>  

  14.  </body>  

  15. </html>  

转载于:https://my.oschina.net/yonghan/blog/631976

你可能感兴趣的文章
MySQL出现Access denied for user ‘root’@’localhost’ (using password:YES)
查看>>
通过Roslyn构建自己的C#脚本(更新版)(转)
查看>>
红黑树
查看>>
python调用windows api
查看>>
第四章 mybatis批量insert
查看>>
Java并发框架——什么是AQS框架
查看>>
【数据库】
查看>>
Win配置Apache+mod_wsgi+django环境+域名
查看>>
linux清除文件内容
查看>>
WindowManager.LayoutParams 详解
查看>>
find的命令的使用和文件名的后缀
查看>>
Android的Aidl安装方法
查看>>
Linux中rc的含义
查看>>
曾鸣:区块链的春天还没有到来| 阿里内部干货
查看>>
如何通过Dataworks禁止MaxCompute 子账号跨Project访问
查看>>
js之无缝滚动
查看>>
Django 多表联合查询
查看>>
logging模块学习:basicConfig配置文件
查看>>
Golang 使用 Beego 与 Mgo 开发的示例程序
查看>>
+++++++子域授权与编译安装(一)
查看>>