JavaScript判断设备类型加载对应网页并设置两端通用事件

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判断设备类型加载对应网页并设置两端通用事件相关推荐

html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
WebBrowser控件判断完全加载中DocumentCompleted和Navigated的关系
WebBrowser控件判断完全加载使用DocumentCompleted是有问题的,所以有人提出可以使用判断DocumentCompleted的次数和Navigated次数完全相等的方法判断是否完全 ...
selenium爬取Ajax加载的网页（以微博为例）
Tip:我写了一篇直接构造请求获取微博数据的文章,不使用selenium,直接访问url获取到json数据,然后解析即可得到想要的数据的文章,请参考微博博主动态及相册的请求构造规律 ========= ...
游览器加载渲染网页过程分析
游览器的工作机制,一句话概括起来就是,web游览器与web服务器之间通过http协议进行通信的过程,所以,c/s之间的协议就是http协议,游览器接受完毕开始渲染大致过程如下: http://blog ...
ArcGIS Server发布服务失败解决办法及ArcGIS Server for Javascript影像图层加载透明度设置（2021.2.12）
Windows更新或者安装应用导致的ArcGIS Server发布服务失败解决方案及WCS影像图层加载到网页地图后的透明度设置 1.前提环境 2.ArcGIS中发布服务到ArcGIS Server失败 ...
android 加载静态网页,React Native：如何在WebView内加载SPA或本地静态HTML页面？
React Native:如何在WebView内加载SPA或本地静态HTML页面? React Native WebView允许你使用uri属性加载可公开访问的资源,就像程序内的一个浏览器.但是,当你 ...
python 动态加载与静态加载_python+django加载静态网页模板解析
今天我们来看看Django是如何加载静态html的? 我们首先来看一看什么是静态HTML,什么是动态的HTML?二者有什么区别? 静态HTML指的是使用单纯的HTML或者结合CSS制作的包括图片.文字 ...
java加载js_[Java教程]javascript如何动态加载js文件
[Java教程]javascript如何动态加载js文件 0 2016-01-01 00:00:52 javascript如何动态加载js文件: 有时候我们需要根据需要动态加载js文件,本章节就简单介 ...
转javascript图片预加载技术
今天看一篇文章,再谈javascript图片预加载技术(http://www.planeart.cn/?p=1121) http://www.qiqiboy.com/2011/05/20/javasc ...

JavaScript判断设备类型加载对应网页并设置两端通用事件

JavaScript判断设备类型加载对应网页并设置两端通用事件相关推荐

最新文章

热门文章