js监听手机端点击物理返回键或js监听pc端点击浏览器返回键

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

原理:

  • 页面加载完成时,调用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Winter漫聊技术

偷工不减料,Android工具推荐(1)

1.Butter Knife自动生成代码; 2.半自动(仅需复制粘贴)生成实体类;

11120
来自专栏ShaoYL

XCode的debug断点调试

55570
来自专栏ShaoYL

XCode的debug断点调试

39070
来自专栏web开发

前后端分离ueditor富文本编辑器的使用-Java版本

最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的u...

1.3K90
来自专栏小白安全

JavaScript危险函数 - HTML操作

1. HTML操作函数简介  当一个方法或操作允许HTML操作,如果有可能控制(甚至部分)参数,则可能在某种程度上操纵HTML,从而获得对用户界面的控制...

51580
来自专栏逍遥剑客的游戏开发

Nebula3 Render Application Wizard

17030
来自专栏hbbliyong

web程序打包详解

   重要更新:鉴于很多小伙伴们说看不到图,我这边换了几个浏览器看了下,都看得到的,估计是网速问题,请耐心等待,另外,为了更好的方便大家学习,特此提供源码以及一...

46370
来自专栏码农笔录

vue项目中swiper动态更新后无法轮播问题 附带案例代码

32140
来自专栏IMWeb前端团队

开源跨平台移动项目Ngui【简介】

Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合Nod...

24760
来自专栏web编程技术分享

用eclipse开发项目时遇到的常见错误,和配套解决方案(不定时更新)

30370

扫码关注云+社区

领取腾讯云代金券