zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Python基础知识(八)—字典
    Python基础知识(七)—元组
    Python基础知识(六)—关于列表深拷贝和浅拷贝及内存图
    Python基础知识(六)—列表
    Python基础知识(五)—字符串
    4、FTP、SSH协议简单介绍
    3、apt-get install xxx时,报错信信息: Could not get lock /var/lib/dpkg/lock-frontend
    2、NFS挂载根文件系统失败:Root-NFS: Unable to get mountd port number from server, using default
    EXPORT_SYMBOL是什么?
    用maven建立一个工程2
  • 原文地址:https://www.cnblogs.com/zhuchenglin/p/7607768.html
Copyright © 2011-2022 走看看