监听当点击微信等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", "#");
} });
在微信中进入页面就触发了popstate事件。
解决方法:定义boolean 变量bool=false。在页面加载后,采用setTimeout方法设置1.5s的超时,在超时执行方法中设置bool=true。
在popstate监听当中增加对bool的判断,当bool=true时,执行内容。具体代码如下:
$(function(){
pushHistory();
var bool=false;
setTimeout(function(){
bool=true;
},1500);
window.addEventListener("popstate", function(e) {
if(bool)
{
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}
pushHistory(); }, false);
});
监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件的更多相关文章
- Android - 监听Activity点击无效
监听Activity点击无效 本文地址: http://blog.csdn.net/caroline_wendy Activity须要先在Manifest注冊,才干在app中使用; Manifest: ...
- React-Native 之 GD (十八)监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能
监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能 原版 APP 中当我们点击 首页和海淘 2个 Item 时,会马上获取最新数据个数然后进行更新,这边来实现一下这个功能. 1. ...
- 使用swipecard实现卡片视图左右滑动监听以及点击监听
前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但 ...
- js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
- Android开发-之监听button点击事件
一.实现button点击事件的方法 实现button点击事件的监听方法有很多种,这里总结了常用的四种方法: 1.匿名内部类 2.外部类(独立类) 3.实现OnClickListener接口 4.添加X ...
- JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)
前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...
- #你好Unity3D#Hierarchy视图监听gameObject点击事件
今天无意间又找到了个好方法 1 2 3 4 5 6 7 8 9 10 [InitializeOnLoadMethod] static void Start () { Selection.s ...
- android 活动监听是否点击某个view
前述(写给做过web前端的人) 在web H5,如果如果判断当前是否点击某个元素,一般会这样写. window.addEventListener("touchstart",func ...
- layui监听radio点击事件
layui.form.on('radio(layui_dataType)', function(data){ console.log(data.elem); //得到radio原始DOM对象 cons ...
随机推荐
- gpio口、内核定时器使用
/*申请gpio*/ int gpio_request(unsigned gpio, const char *label); /*设置gpio为输入状态,即设置如(GPH0CON)*/ int gpi ...
- Linux中断处理驱动程序编写【转】
转自:http://blog.163.com/baosongliang@126/blog/static/1949357020132585316912/ 本章节我们一起来探讨一下Linux中的中断 中断 ...
- 你真的了解js伪数组吗?深入js伪数组
关于js伪数组 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 你可能知道怎么把伪数组转换为数组,但是你知道这里边的原理吗? 假如页面有一组li元素 < ...
- json在线工具
1.json在线格式化工具 http://www.choujone.com/json/ 2.json在线比较工具 http://tlrobinson.net/projects/javascript-f ...
- AdvStringGrid 标题头
标题头内容: 字体: 标题头高度: 头的对齐方式:
- gcc/g++ 命令
gcc & g++现在是gnu中最主要和最流行的c & c++编译器 .g++是c++的命令,以.cpp为主,对于c语言后缀名一般为.c.这时候命令换做gcc即可.其实是无关紧要的.其 ...
- HttpService与WebService的差异
httpservice通过post和get得到你想要的东西webservice就是使用soap协议得到你想要的东西,相比httpservice能处理些更加复杂的数据类型 当你要调用一个你本服务的内容的 ...
- codeforces 354 D. Transferring Pyramid
D. Transferring Pyramid time limit per test 3 seconds memory limit per test 256 megabytes input stan ...
- 跟我一起学WPF(0):初识WPF
WPF是什么 WPF是微软的新一代图形引擎系统,全称为Windows Presentation Foundation,从.NET3.0版本开始引入,为用户界面.2D/3D 图形.文档和媒体提供了统一的 ...
- UtraEdit正则表达式替换.def
* (? 替换(?结尾 ),*$ 替换),开头