JavaScript实现离开页面前提示功能【附jQuery实现方法】


Posted in jQuery onSeptember 26, 2017

本文实例讲述了JavaScript实现离开页面前提示功能。分享给大家供大家参考,具体如下:

离开页面前的提示不可以用onunload去做,因为它只是兼容IE,你要兼容Google与FireFox就蛋疼了。

而且这个事件还是关闭之后才会触发的。

取而代之可以用onbeforeunload去实现。

onbeforeunload可以在用户关闭或刷新窗口、或者点击本页内的任何超级链接都会触发的。

其JavaScript代码如下:

<script>
window.onbeforeunload=function(e){
  var e=window.event||e;
  e.returnValue=("确定离开当前页面吗?");
}
</script>

非常简短,一开始利用window.event与e的或,兼容浏览器。

其返回值就是提示信息。

在IE8的效果如下,第一行与最后一行是必须存在的。用户点击“取消”不会发生任何事情,点击“确定”则继续之前的动作。

JavaScript实现离开页面前提示功能【附jQuery实现方法】

在Google Chrome的效果如下,只有最后一行是我们可以控制的,其它都是系统本身就有的东西,不能够被改写。

JavaScript实现离开页面前提示功能【附jQuery实现方法】

野狐禅的效果如下,其提示信息读不出来,我也没办法,谁叫这个浏览器是野狐禅呢?

JavaScript实现离开页面前提示功能【附jQuery实现方法】

这段东西,用JQuery则这样写:

$(window).bind('beforeunload',function(){
  return '提示信息';
  }
);

JQuery1.9自带全浏览器兼容……

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

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 #jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 #jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 #jQuery
You might like
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
php服务器的系统详解
2019/10/12 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
在Django的URLconf中使用命名组的方法
2015/07/18 Python
django站点管理详解
2017/12/12 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
中秋节慰问信
2015/02/15 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
初中体育课教学反思
2016/02/16 职场文书