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实现简易的单数字0-9随机抽奖，可以控制抽取随机数开始与停止，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要介绍了js实现有过渡渐变效果的图片轮播相册，兼容IE、ff，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了JS性能优化实现方法及优点进行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了莱鸟介绍javascript onclick事件的相关资料,需要的朋友可以参考下2016-01-01
图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。这篇文章主要给大家介绍Bootstrap carousel轮转图的使用实例详解，需要的朋友可以参考下2016-05-05
目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件，一个是wxPrase，本篇文章主要介绍了详解小程序rich-text对富文本支持方案，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了JavaScript读取本地文件常用方法流程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要为大家详细介绍了JavaScript面向对象编写购物车功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了javascript字符串循环匹配,实例分析三种常用的字符串循环匹配的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论