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

更新时间：2017年09月26日 11:47:51 作者：yongh701

这篇文章主要介绍了JavaScript实现离开页面前提示功能,结合具体实例形式分析了javascript实现针对关闭页面的事件响应原理与操作技巧,并附带jQuery的相应实现方法,需要的朋友可以参考下

本文实例讲述了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的效果如下，第一行与最后一行是必须存在的。用户点击“取消”不会发生任何事情，点击“确定”则继续之前的动作。

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

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

这段东西，用JQuery则这样写：

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

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript正则表达式技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

通过实例了解Render Props回调地狱解决方案
这篇文章主要介绍了通过实例了解Render Props回调地狱解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
微信小程序生成海报分享朋友圈的实现方法
利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法，感兴趣的朋友跟随小编一起看看吧
2019-05-05
一步一步教你写淡入淡出带注释的图片轮播插件（二）
开始之前，还是说说前文提到的关于把所有函数都写在一个闭包内的优化问题。前文也提到了，因为我们在初始化的时候要调用的只是init，所以可以只把init写入闭包，其他功能函数作为init的原型继承方法来调用。
2010-10-10
微信小程序动态绑定数据及动态事件处理
这篇文章主要介绍了微信小程序动态绑定数据及动态事件处理的相关资料,需要的朋友可以参考下
2017-03-03
微信小程序用户授权最佳实践指南
这篇文章主要给大家介绍了关于微信小程序用户授权最佳实践的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
JS常用函数和常用技巧小结
这篇文章主要介绍了JS常用函数和常用技巧小结的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-10-10
深入学习JavaScript对象
今天小编就和大家深入学习JavaScript对象，感兴趣的小伙伴们可以参考一下，大家一起学习。
2015-10-10
pc加载更多功能和移动端下拉刷新加载数据
这篇文章主要为大家详细介绍了pc加载更多功能和移动端下拉刷新加载数据,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
原生js实现类似fullpage的单页/全屏滚动
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。
2017-01-01
uniapp使用u-upload组件来实现图片上传功能
最近在用uniapp开发微信小程序,下面这篇文章主要给大家介绍了关于uniapp使用u-upload组件来实现图片上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具