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 相关文章推荐
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 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版(2)
2006/10/09 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
使用JS动态显示文本
2017/09/09 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
javascript实现时钟动画
2020/12/03 Javascript
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
联谊会开场白
2015/06/01 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技