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