js实现关闭网页出现是否离开提示


Posted in Javascript onDecember 07, 2017

js实现关闭网页出现是否离开提示

大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统、信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失。这里面的实现过程很简单,利用了HTML DOM事件中的onunload和onbeforeunload方法。

unload 事件属性

定义:当用户卸载文档时执行一段 JavaScript,例如:

// body
<body onunload="goodbye()">//window
window.onbeforeunload=function(e){     

var e = window.event||e;  

e.returnValue=("确定离开当前页面吗?");
} 

用法:当用户离开页面时,会发生 unload 事件。注意:如果您重载页面,也会触发 unload 事件(以及 onload 事件)。 

触发于:

关闭浏览器窗口通过地址栏或收藏夹前往其他页面的时候点击返回,前进,刷新,主页其中一个的时候点击 一个前往其他页面的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的表单的时候。 onbeforeunload 事件属性

定义:在即将离开当前页面(刷新或关闭)时执行 JavaScript,例如:

//body
<body onbeforeunload="goodbye()">
//window
window.onbeforeunload=function(e){     
var e = window.event||e;  

e.returnValue=("确定离开当前页面吗?");
} 

用法:onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框。注意: 在 Firefox 浏览器中,只显示默认提醒信息(不显示自定义信息)。

触发于: 

关闭浏览器窗口  通过地址栏或收藏夹前往其他页面的时候  点击返回,前进,刷新,主页其中一个的时候  点击 一个前往其他页面的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的表单的时候。

 浏览器支持程度

目前主流浏览器都支持这两个事件属性

 js实现关闭网页出现是否离开提示

概述

onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。 onbeforeunload也是在页面刷新或关闭时调用,onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的,而 onbeforeunload 可以做到。

附:

页面加载时只执行onload 

页面关闭时先执行onbeforeunload,最后onunload 

页面刷新时先执行onbeforeunload,然后onunload,最后onload  

附上部分效果图:

绑定body标签的代码:

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>测试</title>
  <script>
  function checkLeave(){
  

event.returnValue="确定离开当前页面吗?";
  
}
 
</script>
 </head>
 <body onbeforeunload="checkLeave()">
  测试
 </body>
</html>

谷歌浏览器下的效果:

点击刷新按钮:

js实现关闭网页出现是否离开提示

点击返回按钮:

js实现关闭网页出现是否离开提示

通过任务栏或者收藏夹前往其他界面:

js实现关闭网页出现是否离开提示

关闭页面:

js实现关闭网页出现是否离开提示

edge下的效果:

点击刷新按钮:

js实现关闭网页出现是否离开提示

点击返回按钮:

js实现关闭网页出现是否离开提示

关闭页面:

js实现关闭网页出现是否离开提示

 注:在新版的火狐浏览器(我是用的版本: 57.0 )里面,上面这种写法不生效?!

绑定window对象的代码:

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>测试</title>
  <script>
  window.onbeforeunload=function(e){  
   
var e = window.event||e; 
   
e.returnValue=("确定离开当前页面吗?");
   } 
 
</script>
 </head>
 <body>
  测试
 </body>
</html>

火狐下的效果:

点击刷新按钮:

js实现关闭网页出现是否离开提示

点击返回按钮:

js实现关闭网页出现是否离开提示

关闭页面:

 js实现关闭网页出现是否离开提示

注:这种方法在谷歌浏览、edge浏览器下仍适用,效果与第一种一样!

Javascript 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
JavaScrip关于创建常量的知识点
Dec 07 #Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 #Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 #Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
vue中路由参数传递可能会遇到的坑
Dec 07 #Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 #Javascript
面包屑导航详解
Dec 07 #Javascript
You might like
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
Python 实现一行输入多个值的方法
2018/04/21 Python
python学习基础之循环import及import过程
2018/04/22 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
如何做好总经理助理
2013/11/12 职场文书
期终自我鉴定
2014/02/17 职场文书
护士毕业实习感言
2014/03/05 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
小爸爸观后感
2015/06/15 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
通知怎么写?
2019/04/17 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
详解redis分布式锁的这些坑
2021/05/19 Redis
德劲DE1105机评
2022/04/05 无线电
MYSQL如何查看操作日志详解
2022/05/30 MySQL