国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用h5新特性，輕松監(jiān)聽任何App自帶返回鍵

paney129 / 1153人閱讀

摘要：前言如今新特性新標(biāo)簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當(dāng)給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新，輕松監(jiān)聽任何自帶的返回鍵，包括安卓機(jī)里的物理返回鍵，從而實現(xiàn)項目開發(fā)中進(jìn)一步的需求。

1、前言

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

2、起因

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

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

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

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

是不是很眼熟？然而關(guān)鍵需求不能完美實現(xiàn)，要這段代碼有何用，當(dāng)時我也是絞盡腦汁。直到經(jīng)過大神好友指導(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("頁面非激活");
    }else{
        console.log("頁面激活")
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

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

4、手機(jī)兼容性

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93412.html

相關(guān)文章

  • 使用h5新特性，輕松監(jiān)聽任何App自帶返回鍵

    摘要：前言如今新特性新標(biāo)簽新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當(dāng)給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新，輕松監(jiān)聽任何自帶的返回鍵，包括安卓機(jī)里的物理返回鍵，從而實現(xiàn)項目開發(fā)中進(jìn)一步的需求。 1、前言 如今h5新特性、新標(biāo)簽、新規(guī)范等有很多，而且正在不斷完善中，各大瀏覽器商對它們的支持，也是相當(dāng)給力。作為前端程序員，我覺得我們還是有必要積...

    MoAir 評論0 收藏0

  • H5拖放+FormData接口+NodeJS，完整異步文件上傳（一）

    摘要：前段時間面試過程中，頻繁遇到異步文件上傳的相關(guān)問題。所以，這會是一個拖放接口實現(xiàn)文件異步上傳的完整。監(jiān)聽放置元素的事件，通過對象可以獲得拖拽事件的狀態(tài)及數(shù)據(jù)。后端文件接收保存后端使用實現(xiàn)文件上傳。 ??前段時間面試過程中，頻繁遇到H5異步文件上傳的相關(guān)問題。還遇到過一個通過H5拖放功能實現(xiàn)文件異步上傳的問題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試...

    NervosNetwork 評論0 收藏0

  • 2018駕考寶典面試總結(jié)

    摘要：大家好，我來自駕考寶典。同時，我在駕考寶典也工作一年多了。駕考寶典算不上一線大公司，但我個人不管是通過工作，平常的積累，還是自主學(xué)習(xí)，我覺得還是能和大家分享一些更加實戰(zhàn)化的面試題。并處理好廣大安卓機(jī)的兼容性。 大家好，我來自駕考寶典。時間不知不覺進(jìn)入2018金九銀十，下半年的尾聲了，想必很多朋友已經(jīng)看過網(wǎng)上新出的各大廠面試題。同時，我在駕考寶典也工作一年多了。駕考寶典算不上一線大公司，...

    tomener 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<