h5新功能的用法：監聽App自帶的返回鍵

這篇文章跟大家介紹的文章內容是關於使用h5新特性，輕鬆監聽任何App自帶返回鍵，有很好的參考價值，希望可以幫助到有需要的朋友。

1、前言

如今h5新特性、新標籤、新規範等很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當給力。身為前端程式設計師，我覺得我們還是有必要積極關注並勇敢地加以實踐。接下來我將和各位分享一個特別好用的h5新特性（目前也不是特別新），輕鬆監聽任何App自帶的返回鍵，包括安卓機裡的物理返回鍵，從而實現項目開發中進一步的需求。

2、起因

大概半年前接到pm一需求，用純h5實現多audio的播放、暫停、續播，頁面放至駕考寶典App中，與客戶端沒有任何的交互，所以與客戶端相關的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);

所有問題迎刃而解。
這段程式碼的原理我個人理解就是透過判斷使用者瀏覽的是否為當前頁，從而進行相關操作。
這是 MDN相關連結:https://developer.mozilla.org...。

4、手機相容性

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

並不是說真的可以透過JS監聽到用戶對App裡的自帶返回鍵的直接操作，甚至安卓的實體返回鍵，而是透過轉變思路，快速實現需求。希望這個特性能幫到各位。

相關推薦：

如何使用Chrome控制台進行3D模型編輯的實作（程式碼）

H5微信支付之引入微信的js- sdk套件失敗的解決方法

以上是h5新功能的用法：監聽App自帶的返回鍵的詳細內容。更多資訊請關注PHP中文網其他相關文章！