JS监听手机物理返回键(及IOS微信端的bug)
需求场景
有一天,头儿给我提了这样一个需求:
无论页面如何跳转,在首页的时候再按返回,直接退出...
解决思路
关闭网页好说,由于我们的项目是微信公众号,直接调用微信浏览器的内置函数:
WeixinJSBridge.call('closeWindow')
复制代码
但是怎么监听到这个返回的事件呢?办法呢还是有滴!
1. popstate-一个可以监听历史记录点的API
JavaScript中没有监听物理返回键的API,所以通过监听浏览器历史记录的变化来实现。
在HTML5就提供给我们 popstate 用来监听历史记录点。
window.addEventListener("popstate", function(e) { // 如果监听到返回,就跳转到百度首页window.location = 'http://www.baidu.com';
}, false);
复制代码
2. 监听不到?pushState来告诉你为什么
当我们完成两个页面来测试步骤一中代码的时候,发现返回的时候根本没跳转到百度首页。
转念一想不对啊,监听到popstate事件的一瞬间就返灰到上一页面了啊。为啥没反应,心里有点了逼数了啊!
不卖关子了,为了能返回后不回到上一级页面,可以使用 pushState 来向历史记录栈中在插入一条新纪录。
注意: 此处为了返回不跳转,插入一个锚链接(此处有坑,下文解释)就行
/**
* window.history.pushState(state, title, url)
*
* state:与要跳转到的URL对应的状态信息。
* title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替。
* url:要跳转到的URL地址,不能跨域。
**/ var state = { title: "title", url: "#"
};
window.history.pushState(state, null, "#"); 复制代码
没意外的话,现在配合步骤一中代码,是可以监听到页面返回事件,从而跳转到百度首页。这也是网上能看到的绝大多数的思路。提醒一下,replaceState 虽然也可以改变历史记录栈,但是为了不破坏原有历史记录,此处最好使用 pushState。
3. 简单整理一下前两步中代码
// 封装一下push历史记录的方法
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, null, "#");
} // 在需要监听的页面执行该方法
pushHistory();
window.addEventListener("popstate", function(e) { // 如果监听到返回,就跳转到百度首页window.location = 'http://www.baidu.com';
}, false);
复制代码
问题搜集(网上搜集)
在微信中进入页面就触发了popstate事件
解决方法:定义boolean 变量bool=false。在页面加载后,采用setTimeout方法设置1.5s的超时,在超时执行方法中设置bool=true。
// 封装一下push历史记录的方法
function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, null, "#");
} // 在需要监听的页面执行该方法
var bool=false;
setTimeout(function(){bool=true;
},1500);pushHistory();
window.addEventListener("popstate", function(e) { // 如果监听到返回,就跳转到百度首页if(bool){window.location = 'http://www.baidu.com'; }pushHistory();
}, false);
复制代码
这是网上看到好多人遇到的问题,虽然加了延迟,但是仍然解决不了我的问题,也许是应用场景的不同,此处暂时记下,做个参考
IOS微信端popstate自动触发的解决
在IOS端的微信,如果页面A->页面B,如果两个页面都设置了返回重定向(也就是以上代码),按下返回键的时候,页面A的popstate也会自动触发,管你设置多少延迟也没用。
当时在网上找了很多方法,都没解决。
也许是自己手欠的缘故,有一次在毫无思路的情况下,在锚链接后加了个标识:
// 封装一下push历史记录的方法
function pushHistory() { var state = { title: "title", url: "#forward" }; window.history.pushState(state, null, "#forward");
} // 在需要监听的页面执行该方法
pushHistory();
window.addEventListener("popstate", function(e) { // 如果监听到返回,就跳转到百度首页window.location = 'http://www.baidu.com';
}, false);
复制代码
你妹的,居然解决了
当然,此时我原来加的延迟也去掉了,反正对我来说也没什么用了!
总结: 在使用以上方式实现返回重定向的时候,切记不要只push进去一个空锚点。希望我这次的经验能给遇到同样问题的朋友一些经验。如果有朋友有更好的解决办法,也希望可以分享给我!
JS监听手机物理返回键(及IOS微信端的bug)相关推荐
- JS监听手机物理返回键,返回到指定页面
pushHistory(); window.addEventListener("popstate", function(e) { window.location = data.in ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript监听手机物理返回键的两种解决方法 参考文章: (1)JavaScript监听手机物理返回键的两种解决方法 (2)https://www.cnblogs.com/xzzzys/p/8 ...
- uniapp踩坑(五):监听手机物理返回键和滑动返回事件
需求 android端和ios端点击手机物理返回键(左上角的)或页面滑动键退出后,弹出弹框,点击确定后才退出该页面. 截图展示: 实现代码: 在onBackPress()方法中实现. 注意一定要在su ...
- android 监听物理返回键,Android应用开发之react-native 监听Android物理返回键
本文将带你了解Android应用开发之react-native 监听Android物理返回键,希望本文对大家学Android有所帮助. 1. componentWillMount(){ ...
- H5中 JS 禁用安卓手机物理返回键 , 微信浏览器中也支持
XBack = {}; (function(XBack) { XBack.STATE = 'x - back'; XBack.element; ...
- JS 监听手机返回键
JS监听手机返回键,需要用些前端的"奇技淫巧". 核心代码如下: if (window.history && window.history.pushState) { ...
- 原生js监听手机返回键
创建人:hu_time 描述:js监听手机返回键 普通页面跳转,监听返回上一页: document.addEventListener("plusready", function() ...
- 混合开发监听安卓手机物理返回键
混合开发监听安卓手机物理返回键 在用h5做混合开发过程中由于有个考试考试页面,中途不能退出,退出要添加确认操作,所以需要监听手机的返回操作,不让用户直接通过返回键返回 目前了解到混合开发中有两种方式监 ...
- 通过手机物理返回键实现弹出层的隐藏
通过手机物理返回键实现弹出层的隐藏 <template><div class="popup"><h1 @click="popup" ...
最新文章
- 微信界面代码android,仿微信界面代码安卓版
- storyboard或者Xib给View设置边框属性(颜色,宽度,圆角)
- kotlin学习笔记——操作符
- Sql Server事务日志
- 局域网中设备的管理之StackCluster
- LeetCode 474. Ones and Zeroes 动态规划解法+拓展
- 数论概论学习笔记(一)——勾股数
- php中文网 日历,php小型日历类库
- PHP中通过Web 执行C/C++应用程序
- XCL-Charts圈图
- Linux系统编程 -- stdin stdout stderr
- 【L298N 驱动电机的线路连接图】
- 查看win10的产品密钥过期时间
- 小程序源码:朋友圈集赞万能截图生成器-多玩法安装简单
- 科普 | 金融衍生品系列——互换
- python 爬取 强智科技教务系统(湖南)
- STM32开发,串口和PC机通信(串口中断、FIFO机制),安富莱+正点原子程序合并
- android 陀螺仪简单使用,判读手机是否静止状态
- STM32_光敏、温湿度传感的选择?
- 荣耀手表es鸿蒙,荣耀手表ES评测:方形大屏+轻盈机身,599元腕上健康全能管家...