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对象创建及继承原理实例解剖
Feb 28 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
js的回调函数详解
Jan 05 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
js date 格式化
Feb 15 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python实现中文输出的两种方法
2015/05/09 Python
解析Python中的二进制位运算符
2015/05/13 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Mac 上切换Python多版本
2017/06/17 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python如何查看微信消息撤回
2018/11/27 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
毕业生如何写自我鉴定
2014/03/15 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android