监听当点击微信等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 ...
随机推荐
- 大数据系列之数据仓库Hive原理
Hive系列博文,持续更新~~~ 大数据系列之数据仓库Hive原理 大数据系列之数据仓库Hive安装 大数据系列之数据仓库Hive中分区Partition如何使用 大数据系列之数据仓库Hive命令使用 ...
- 【前端vue开发架构】vue开发单页项目架构总结
为营销活动设计的前端架构 主要的技术栈为 Vuejs,Webpack,请自行阅读如下技术或者框架的文档: 一.基础说明: node (https://nodejs.org/en/) npm (http ...
- DevExpress CxGrid 隐藏 Drag a column header to group by that column
- 30 最小的k个数
输入n个整数,找出其最小的k个数,例如输入4,5,1,6,2,7,3,8,最小的4个数为1,2,3,4 解法一:快排思想,会改变原数组 O(n) 注意是vector<int>& ...
- Java语法知识总结
一:java概述: 1991 年Sun公司的James Gosling等人开始开发名称为 Oak 的语言,希望用于控制嵌入在有线电视交换盒.PDA等的微处理器: 1994年将Oak语言更名为Java: ...
- mysql 插入时带判断条件
INSERT INTO table (f1 ,f2 ,f3) ,'a', FROM DUAL WHERE NOT EXISTS ( FROM table2 where a = b) DUAL 为临时表 ...
- CentOS 7下安装Python3.6和pip
一.安装python3.6 1.1.安装python3.6需要依赖包 yum install openssl-devel bzip2-devel expat-devel gdbm-devel read ...
- 004 Hadoop2.x基础知识
一:大数据应用 1.Cloudera cloudera公司是Hadoop三大发行商之一,其版本为CDH版本,现在最新的版本是CDH5. 网站:http://archive.cloudera.com/c ...
- poj1182 食物链(带权并查集)
题目链接 http://poj.org/problem?id=1182 思路 前面做的带权并查集的权值记录该结点与其父结点是否是同一类,只有两种取值情况(0,1),在这题中某结点a和其父结点b的取值共 ...
- ECshop 迁移到 PHP7版本时遇到的兼容性问题,ecshopphp7
ECshop 迁移到 PHP7版本时遇到的兼容性问题,ecshopphp7 在 PHP7 上安装 ECShop V2.7.3时,报错! Deprecated: Methods with the sam ...