JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
更新时间：2016年08月05日 11:26:52 作者：Mr_Smile2014
这篇文章主要介绍了JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法,需要的朋友可以参考下
在实际的应用中，我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的需求，那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。
我相信很多朋友像我一样，在百度、搜狗里面搜索很久都没找到方法。
下面就来告诉大家怎样监听的方法：
首先我们要了解浏览器的history。
大家知道在页面中我们可以使用javascript window history，后退到前面页面，但是由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件监测，那么我们就可以进行监听。
返回、后退、上一页按钮点击监听实现代码：
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
虽然我们监听到了后退事件，但是页面还是会返回上一个页面，所以我们需要使用pushState增加一个本页的url,代表本页，大家都非常清楚是#
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
当进入该页面，我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时，就进行监听，在监听代码中实现自己操作。
下面是完整的代码：
$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
});
以上内容只是小编给大家列出的核心代码，大家根据需求适当的添加，修改，删除代码。如果大家在参考本段代码的过程中发现有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要帮助大家轻松实现js选项卡切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了浅谈webpack组织模块的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
昨天群里面的朋友问了个比较有意思的问题,keydown,keyup,keypress事件的先后顺序。2009-02-02
TypeScript 中的 .d.ts 文件详解(加强类型支持提升开发效率)
.d.ts 文件在 TypeScript 开发中扮演着非常重要的角色,它们让我们能够享受到 TypeScript 强大的类型系统带来的优势,提高代码质量和开发效率,接下来,我们将深入探讨如何为 JavaScript 库和自定义模块创建 .d.ts 文件,以及一些最佳实践和注意事项,一起看看吧2023-09-09
今天凌晨，微信负责人张小龙在微信朋友圈晒出了一组图，网友看到纷纷“炸裂”，这到底是什么？是的，微信小程序如约上线，微信小程序怎么打开，微信小程序在哪里进入，请阅读本文2017-01-01
bootstrap datepicker插件默认英文修改为中文
这篇文章主要为大家详细介绍了bootstrap datepicker插件默认英文修改为中文的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了javascript进行四舍五入方法汇总，并给出了相关示例,需要的朋友可以参考下2014-12-12
今天小编就为大家分享一篇关于js中数组对象去重的两种方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
今天在整理以前写过的一段根据周期值自动计算下次执行日期的js代码，发现一bug,我使用parseInt对源数据串进行转换，当输入类似：2009-05-05时，parseInt将把串的05做8进制转换，这样结果自然就不对了。2009-05-05
最新评论