之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上的那个返回按钮的操作了,但是这个物理返回键的监听好像没有直接的办法进行,所以有人就想到了曲线的办法

原理:

  • 页面加载完成时,调用history.pushState写入一个指定状态STATE,并监听window.onpopstate;
  • 当onpopstate被触发时,检查event.state是否等于STATE,如果相等,表示页面发生了后退(按下返回键或者浏览器的后退按钮),则把这次行为当作是返回键被按下了(把点击浏览器的后退按钮也误算进来了,不过没啥好法子了呀)。

为了方便调用,有人把这个逻辑稍微封装了下,代码见这里(https://github.com/iazrael/xback

使用方法:

将此插件引进去后,使用方法:

XBack.listen(function(){
alert('ah, press press press');
});

具体使用的时候,也有一些问题:

因为这个是实现利用histroy.pushState写入了一个指定状态STATE,你点击一次后,这个写入的状态就没有了,如果你没有后退页面(还在当前页面),上次那个监听的操作执行完后,你还需要监听这个物理返回键,这时候你就需要再上次那个操作完之后再使用histroy.pushState再写入一次之前写入的那个状态,这样下次会继续监听那个物理返回键,否则下次你再点击那个返回键的话,就会直接返回浏览器的栈的上一级

不过这个方法有些缺陷:
  • 如果项目本身使用了pushState,则历史记录会有瑕疵(多了一个历史);
  • 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。

举个例子:

我在vue的项目中引入xback.js

<remote-script src="/js/xback.js" @load="load_xback"></remote-script>

关于上面在vue中引入外部js,请参考 http://www.cnblogs.com/zhuchenglin/p/7455203.html

然后在vue中定义一个load_xback 方法

 load_xback(){
var self = this
XBack.listen(function(){
            //这个是vux的确认弹出框
self.$vux.confirm.show({
title:'确认返回吗?',
content:'确认后,将返回',
onConfirm () {
//确认返回操作
},
onCancel(){
history.pushState('x-back', null, location.href);
// XBack.record;
}
})
});
},

xback源码:

;!function(pkg, undefined){
var STATE = 'x-back';
var element; var onPopState = function(event){
event.state === STATE && fire();
} var record = function(state){
history.pushState(state, null, location.href);
} var fire = function(){
var event = document.createEvent('Events');
event.initEvent(STATE, false, false);
element.dispatchEvent(event);
} var listen = function(listener){
element.addEventListener(STATE, listener, false);
} ;!function(){
element = document.createElement('span');
window.addEventListener('popstate', onPopState);
this.listen = listen;
this.record = record(STATE);
record(STATE);
}.call(window[pkg] = window[pkg] || {}); }('XBack');

这个方法目前只对支持h5浏览器有效

本文参考:http://blog.csdn.net/kongjiea/article/details/22850629

如需转载此文,请在下面注明出处:http://www.cnblogs.com/zhuchenglin/p/7607768.html

js监听手机端点击物理返回键或js监听pc端点击浏览器返回键的更多相关文章

  1. js 时间转成时间戳对比;My97DatePicker日历控件时间格式;Date.parse Firefox火狐浏览器返回Nan的解决办法

    有个情况,我在显示时间的时候是需要显示为  2013年8月15日 14时28分15秒 但是假如我用js去获取到这个时间,并且想进行时间对比的时候,这个时间2013年8月15日 14时28分15秒根本就 ...

  2. 用BroadcastReceiver监听手机网络状态变化

    android--解决方案--用BroadcastReceiver监听手机网络状态变化 标签: android网络状态监听方案 2015-01-20 15:23 1294人阅读 评论(3) 收藏 举报 ...

  3. Android时时监測手机的旋转角度 依据旋转角度确定在什么角度载入竖屏布局 在什么时候载入横屏布局

    一.场景描写叙述: 最近开发中遇到个问题,就是我们在做横竖屏切换的功能时.横竖屏布局是操作系统去感知的,作为开发员没法确定Activity在什么时候载入横屏布局,在什么时候载入竖屏布局.因此为了找到载 ...

  4. 知识点---js监听手机返回键,回到指定界面

    方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...

  5. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  6. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  7. VueApp监听手机物理返回键的事件

    代码 第一步创建js文件夹子 在main里面引用   JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...

  8. js history对象 手机物理返回键

    有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...

  9. 使用ionic开发时用遇到监听手机返回按钮的问题~

    当时用的是ionic开发一个app,需求是,当按下手机的返回按钮,在指定的页面双击退出,而在其他页面点击一次返回到上个页面: 其实用ionic自带的服务就可以解决:  //双击退出   $ionicP ...

随机推荐

  1. javap 指令集

    栈和局部变量操作将常量压入栈的指令aconst_null 将null对象引用压入栈iconst_m1 将int类型常量-1压入栈iconst_0 将int类型常量0压入栈iconst_1 将int类型 ...

  2. flink 有状态udf 引起血案一

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/rlnLo2pNEfx9c/article/details/83422587 场景 近期在做一个画像的 ...

  3. npm run dev

     npm run dev     npm run build

  4. [Java] 绕过证书验证调 HTTPS 接口时报 “SSLHandshakeException: DHPublicKey does not comply to algorithm constraints”的解决办法

    作者: zyl910 一.缘由 最近有在对接一个无证书的HTTPS接口时,总是收到"SSLHandshakeException: DHPublicKey does not comply to ...

  5. 单片机成长之路(51基础篇) - 006 在Linux下搭建51单片机的开发烧写环境

    在Linux下没有像keli那样好用的IDE来开发51单片机,开发环境只能自己搭建了. 第一步:安装交叉编译工具 a) 安装SDCC sudo apt-get install sdcc b)测试SDC ...

  6. weak_ptr<T>智能指针

    weak_ptr是为配合shared_ptr而引入的一种智能指针,它更像是shared_ptr的一个助手,而不是智能指针,因为它不具有普通指针的行为,没有重载operator*和operator-&g ...

  7. 城市经纬度 json 理解SignalR Main(string[] args)之args传递的几种方式 串口编程之端口 多线程详细介绍 递归一个List<T>,可自己根据需要改造为通用型。 Sql 优化解决方案

    城市经纬度 json https://www.cnblogs.com/innershare/p/10723968.html 理解SignalR ASP .NET SignalR 是一个ASP .NET ...

  8. Python 爬虫实例(9)—— 搜索 爬取 淘宝

    # coding:utf- import json import redis import time import requests session = requests.session() impo ...

  9. BizTalk Schedule Adapter的使用

    由于BizTalk作为一个消息中间件是无状态的,一般不能主动去触发消息.因此在有一些特定的场景,比如每隔X分钟/小时/天去轮询或获取数据时就会特别不方便.不过可以通过Codeplex上的开源项目:Bi ...

  10. 【CFD之道】2018年原创文章汇总

    以下是公众号CFD之道2018年的全部原创文章,共计210篇. 1 Fluent验证案例[60篇] Fluent验证案例02:通过均匀热通量管道层流流动 Fluent验证案例03:管道中湍流流动压降计 ...