• 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

  • 相关阅读:
    关于这个 blog
    P6499 [COCI2016-2017#2] Burza 题解
    CF1172F Nauuo and Bug 题解
    CF1479D Odd Mineral Resource 题解
    CF1442E Black, White and Grey Tree 题解
    CF1442D Sum 题解
    CF1025D Recovering BST 题解
    CF1056E Check Transcription 题解
    CF1025F Disjoint Triangles 题解
    红包算法的PHP实现
  • 原文地址:https://www.cnblogs.com/zhuchenglin/p/7607768.html
Copyright © 2020-2023  润新知