JavaScript如何判斷設備類型加載對應網頁并設置通用事件

基本思路：

在網頁入口添加判斷邏輯，如下：首先獲取當前navigator對象的userAgent，通過userAgent判斷當前設備類型。

①：如果符合移動端判斷邏輯，則加載移動端入口；否則加載pc端入口

②：通用事件的設置，比如點擊事件，PC端為click，但是移動端也用click的話分不清是長按還是點擊；根據平臺類型設置通用事件，可以在寫觸發函數時不用每次都判斷。

舉個例子：如下圖，點擊語言選擇按鈕彈出語言選擇框，用click事件的話，PC端沒有什么問題，但是移動端的話長按時不應該彈出，應該手指離開時再顯示。這時我們可以給window定義一個事件，比如clickEvent，在當前頁面下載時設置這個clickEvent對應的正確的事件。在寫觸發函數時就不必判斷當前設備類型。

設置clickEvent后實現上邊需求的源碼：

$('.select-language').on(clickEvent, () => {$('.language-pop').fadeIn()})

JavaScript判斷設備類型加載對應網頁并設置通用事件源碼：

(function(){var userAgent = window.navigator.userAgent;var ua = userAgent.toLowerCase();var platform = {isAndroid: function() {return ua.indexOf("android") > -1;},isIOS: function() {return ua.indexOf("iphone") > -1;},isWinPhone: function() {return !!navigator.userAgent.match(/Windows Phone/i);},isIpad : function(){return ua.indexOf("ipad") > -1;},isPhone: function() {return this.isAndroid() || this.isIOS() || this.isWinPhone() || this.isIpad();}}if(!platform.isPhone()){window.location.href = window.location.href.replace("mobile.html","pc.html");}window.isPhone = platform.isPhone();window.clickEvent = isPhone ? 'touchend':'click';window.moveEvent = isPhone ? 'touchmove':'mousemove';window.clickStart = isPhone? 'touchstart' : 'mousedown';window.clickEnd = isPhone? 'touchend' : 'mouseup';})();

?

?

?

總結

以上是生活随笔為你收集整理的JavaScript判断设备类型加载对应网页并设置两端通用事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。