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 相关文章推荐
jquery validate poshytip 自定义样式
Nov 26 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
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查找任何页面上的所有链接的方法
2013/12/03 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
js实现批量删除功能
2020/08/27 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python getpass实现密文实例详解
2019/09/24 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
原材料检验岗位职责
2014/03/15 职场文书
企业诚信承诺书
2014/05/23 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
党员剖析材料范文
2014/12/18 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript