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动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
webpack的移动端适配方案小结
Jul 25 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
js实现内容显示并使用json传输数据
2016/03/16 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
简单实现js浮动框
2016/12/13 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
js判断节假日实例代码
2017/12/27 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
layui实现三级联动效果
2019/07/26 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
公司董事长职责
2013/12/12 职场文书
毕业生工作求职信
2014/06/30 职场文书
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技