H5-監聽任何安卓機、App自帶的物理返回鍵

lynn_發表於2018-07-06
H5安卓APP

1、的h5新特性，監聽任何App自帶的返回鍵，包括安卓機裡的物理返回鍵，從而實現專案開發中進一步的需求。

2、用純h5實現多audio的播放、暫停、續播，頁面與客戶端沒有任何的互動，所以與客戶端相關的js不需要引用。

3、監聽任何App自帶的返回鍵，以及安卓機裡的物理返回鍵。
蘋果手機不管是微信、QQ、App，還是瀏覽器裡，涉及到audio、video，返回上一頁系統會自動暫停當前的播放的，但不是所有安卓機都可以。所以我們自己必須自定義監聽。第一想法就是百度，然後出來的答案無非是這樣：(這段程式碼關鍵需求不能完美實現)

pushHistory(); 
window.addEventListener("popstate", function(e) { 
    alert("我監聽到了瀏覽器的返回按鈕事件啦");//根據自己的需求實現自己的功能
}, false); 
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
}
複製程式碼

下面這段程式碼的原理我個人理解就是通過判斷使用者瀏覽的是否為當前頁，從而進行相關操作；所有問題迎刃而解。

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
     null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (document[hiddenProperty]) {    
        console.log('頁面非啟用');
    }else{
        console.log('頁面啟用')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
複製程式碼

4、手機相容性
現在的安卓機系統4.0等都是低配版了，該屬性大部分安卓機都能識別，個人低配版安卓機無法識別，原因在於navigator.userAgent核心版本過低，chrome現在很多是64+了，所以遇到該問題只要想辦法相容它就好了。

相關文章