JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法


Posted in Javascript onAugust 05, 2016

在实际的应用中,我们常常需要实现在移动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", "#"); 
} 
});

以上内容只是小编给大家列出的核心代码,大家根据需求适当的添加,修改,删除代码。如果大家在参考本段代码的过程中发现有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript中创建对象的几种方法总结
Nov 01 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JS如何判断json是否为空
Jul 06 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
如何利用ES6进行Promise封装总结
Feb 11 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
jQuery实现定位滚动条位置
Aug 05 #Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 #Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 #Javascript
JavaScript中的this引用(推荐)
Aug 05 #Javascript
JS实现HTML表格排序功能
Aug 05 #Javascript
JavaScript如何实现跨域请求
Aug 05 #Javascript
JavaScript数组操作函数汇总
Aug 05 #Javascript
You might like
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php实现的RSS生成类实例
2015/04/23 PHP
如何离线执行php任务
2017/02/21 PHP
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
如何利用Pyecharts可视化微信好友
2019/07/04 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
应届生英语教师求职信
2013/11/05 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
组织关系转移介绍信
2014/01/16 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
大学生村官演讲稿
2014/04/25 职场文书
2014年工程师工作总结
2014/11/25 职场文书
文体活动总结
2015/02/04 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
python和anaconda的区别
2022/05/06 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL