摘要:前言如今新特性新標簽新規范等有很多,而且正在不斷完善中,各大瀏覽器商對它們的支持,也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新,輕松監聽任何自帶的返回鍵,包括安卓機里的物理返回鍵,從而實現項目開發中進一步的需求。
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.0等都是低配版了,該屬性大部分安卓機都能識別,個人低配版安卓機無法識別,原因在于navigator.userAgent內核版本過低,chrome現在很多是64+了,所以遇到該問題只要想辦法兼容它就好了。
并不是說真的可以通過JS監聽到用戶對App里的自帶返回鍵的直接操作,甚至安卓的物理返回鍵,而是通過轉變思路,快速實現需求。希望這個特性能幫到各位。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51976.html
摘要:前言如今新特性新標簽新規范等有很多,而且正在不斷完善中,各大瀏覽器商對它們的支持,也是相當給力。接下來我將和各位分享一個特別好用的新特性目前也不是特別新,輕松監聽任何自帶的返回鍵,包括安卓機里的物理返回鍵,從而實現項目開發中進一步的需求。 1、前言 如今h5新特性、新標簽、新規范等有很多,而且正在不斷完善中,各大瀏覽器商對它們的支持,也是相當給力。作為前端程序員,我覺得我們還是有必要積...
摘要:前段時間面試過程中,頻繁遇到異步文件上傳的相關問題。所以,這會是一個拖放接口實現文件異步上傳的完整。監聽放置元素的事件,通過對象可以獲得拖拽事件的狀態及數據。后端文件接收保存后端使用實現文件上傳。 ??前段時間面試過程中,頻繁遇到H5異步文件上傳的相關問題。還遇到過一個通過H5拖放功能實現文件異步上傳的問題,大概知道H5有新增拖拽功能可以接收文件,如何異步上傳文件就母雞了(攤手)。面試...
摘要:大家好,我來自駕考寶典。同時,我在駕考寶典也工作一年多了。駕考寶典算不上一線大公司,但我個人不管是通過工作,平常的積累,還是自主學習,我覺得還是能和大家分享一些更加實戰化的面試題。并處理好廣大安卓機的兼容性。 大家好,我來自駕考寶典。時間不知不覺進入2018金九銀十,下半年的尾聲了,想必很多朋友已經看過網上新出的各大廠面試題。同時,我在駕考寶典也工作一年多了。駕考寶典算不上一線大公司,...
閱讀 3561·2021-09-22 10:52
閱讀 1588·2021-09-09 09:34
閱讀 1990·2021-09-09 09:33
閱讀 758·2019-08-30 15:54
閱讀 2598·2019-08-29 11:15
閱讀 713·2019-08-26 13:37
閱讀 1667·2019-08-26 12:11
閱讀 2975·2019-08-26 12:00