js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)


Posted in Javascript onJuly 18, 2015

本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)。分享给大家供大家参考。具体如下:

用户离开页面前,提示是否离开此页面(包括浏览器按钮事件)

<script type="text/javascript">
window.onbeforeunload = function(){
return "您的文章尚未保存!";
}
</script>

如果在退出页面时需要弹出对话框,提示用户将要退出页面,类似当设置某个功能时而没有保存页面。这个实现的方法比较简单,最常见的就是使用unload事件,但这种实现有一个缺点,就是不管同意与否,结果还是一样,会退出页面,因此,如果要弹出对话框,就有用户可选择的空间,如果确定则退出,否则就不关闭页面

这里推荐使用onbeforeunload()事件,意思就是在加载unload事件前执行的方法,使用如下:

<script type="text/javascript">
  window.onbeforeunload = function(){
  return "必您确定要退出页面吗?";
  }
</script>

这样就会弹出一个对话框,只有确认将会退出页面。

window.onbeforeunload可结合jQuery实现当用户设置页面而没有保存的提示效果,也就是如果已保存则不应该提示出对话框,可使用如下方法,当不需要

提示对话框:

<script type="text/javascript">
 window.onbeforeunload = function(){
  return;
 }
</script>

这样就会直接退出页面,而不会弹出任何对话框。

结合jQuery实现Javascript退出页面弹出对话框就是结合上面两种方法,当页面满足某种情况后,如果需要弹出对话框则弹出,否则不弹出对话框,这样就非常的方便,jQuery有自身的unload方法,但同样不能实现返回,只有一种结果,那就是退出页面,因此,结合window.onbeforeunload 将能实现一个退出页面弹出对话框的功能。

PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript中的有名函数和无名函数
Oct 17 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
JS作用域链详解
Jun 26 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 #Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 #Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 #Javascript
javascript顺序加载图片的方法
Jul 18 #Javascript
javascript字符串循环匹配实例分析
Jul 17 #Javascript
动态加载jQuery的两种方法实例分析
Jul 17 #Javascript
javascript父子页面通讯实例详解
Jul 17 #Javascript
You might like
网络资源
2006/10/09 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
培养自己的php编码规范
2015/09/28 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
TensorFlow实现模型评估
2018/09/07 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python API len函数操作过程解析
2020/03/05 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
自主招生自荐信格式
2013/12/03 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
清洁工岗位职责
2015/02/13 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python异常类型以及处理方法汇总
2021/06/05 Python