h5新特性的用法案例

這篇文章給大家分享的是有關(guān)h5新特性的用法案例的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

1、前言

如今h6新特性、新標(biāo)簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對(duì)它們的支持，也是相當(dāng)給力。作為前端程序員，我覺(jué)得我們還是有必要積極關(guān)注并勇敢地加以實(shí)踐。接下來(lái)我將和各位分享一個(gè)特別好用的h6新特性（目前也不是特別新），輕松監(jiān)聽(tīng)任何App自帶的返回鍵，包括安卓機(jī)里的物理返回鍵，從而實(shí)現(xiàn)項(xiàng)目開(kāi)發(fā)中進(jìn)一步的需求。

2、起因

大概半年前接到pm一需求，用純h6實(shí)現(xiàn)多audio的播放、暫停、續(xù)播，頁(yè)面放至駕考寶典App中，與客戶端沒(méi)有任何的交互，所以與客戶端相關(guān)的js不需要引用?？瓷先ミ@需求挺簡(jiǎn)單的嘛，雖然之前也沒(méi)做過(guò)類(lèi)似的需求。不管三七二十一，擼起袖子就是干。開(kāi)始了學(xué)習(xí)之旅。

3、我這里著重介紹下我具體是怎么監(jiān)聽(tīng)任何App自帶的返回鍵，以及安卓機(jī)里的物理返回鍵。

那為什么我要去監(jiān)聽(tīng)呢，這里我有必要強(qiáng)調(diào)強(qiáng)調(diào)再?gòu)?qiáng)調(diào)。蘋(píng)果手機(jī)不管是微信、QQ、App，還是瀏覽器里，涉及到audio、video，返回上一頁(yè)系統(tǒng)會(huì)自動(dòng)暫停當(dāng)前的播放的，但不是所有安卓機(jī)都可以。所以我們自己必須自定義監(jiān)聽(tīng)。很多朋友可能第一想法就是百度，然后出來(lái)的答案無(wú)非是這樣

pushHistory(); 
window.addEventListener("popstate", function(e) { 
    alert("我監(jiān)聽(tīng)到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能 
}, false); 
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
}

是不是很眼熟？然而關(guān)鍵需求不能完美實(shí)現(xiàn)，要這段代碼有何用，當(dāng)時(shí)我也是絞盡腦汁。直到經(jīng)過(guò)大神好友指導(dǎo)，復(fù)制了這段代碼

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('頁(yè)面非激活');
    }else{
        console.log('頁(yè)面激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

所有問(wèn)題迎刃而解。
這段代碼的原理我個(gè)人理解就是通過(guò)判斷用戶瀏覽的是否為當(dāng)前頁(yè)，從而進(jìn)行相關(guān)操作。
這是 MDN相關(guān)鏈接:https://developer.mozilla.org...。

4、手機(jī)兼容性

眾所周知現(xiàn)在的安卓機(jī)系統(tǒng)4.0等都是低配版了，該屬性大部分安卓機(jī)都能識(shí)別，個(gè)人低配版安卓機(jī)無(wú)法識(shí)別，原因在于navigator.userAgent內(nèi)核版本過(guò)低，chrome現(xiàn)在很多是64+了，所以遇到該問(wèn)題只要想辦法兼容它就好了。

并不是說(shuō)真的可以通過(guò)JS監(jiān)聽(tīng)到用戶對(duì)App里的自帶返回鍵的直接操作，甚至安卓的物理返回鍵，而是通過(guò)轉(zhuǎn)變思路，快速實(shí)現(xiàn)需求。希望這個(gè)特性能幫到各位。

感謝各位的閱讀！關(guān)于h5新特性的用法案例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！