JavaScript-手机中访问页面判断

简介:

最近在做微信服务号开发,其中遇到一个问题是微信服务号查看的个人的消息,如果点击在浏览器中查看(iOS中是在Safari中打开)应该是跳转到登录页面,因为页面需要从后台获取,因为需要服务端判断,如果是存页面不需要后台数据可以在前台进行判断,因为后台是NodeJS,所以给出客户端和服务端两个版本的代码供参考。

客户端判断

方法很简单,就是通过userAgent去判断,先判断是否为移动端,可以判断是iOS终端和Android终端,也可以具体到应用进行判断微信,微博,qq访问:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var browser = {
     versions: function() {
         var u = navigator.userAgent,
            ua = navigator.userAgent.toLowerCase();
         return { //移动终端浏览器版本信息
             trident: u.indexOf('Trident') > -1, //IE内核
             presto: u.indexOf('Presto') > -1, //opera内核
             webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
             gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
             ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
             android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
             iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
             iPad: u.indexOf('iPad') > -1, //是否iPad
             webApp: u.indexOf('Safari') == -1 ,//是否web应该程序,没有头部与底部
             wechat:ua.match(/MicroMessenger/i) == "micromessenger",//微信
             weibo:ua.match(/WeiBo/i) == "weibo",//微博
             qq:ua.match(/QQ/i) == "qq"//qq
         };
     }(),
     language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
console.log(navigator.userAgent);

服务端判断

NodeJS同样也是通过userAgent判断,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var browser= function(req) {
     var u = req.headers['user-agent'];
     var ua = u.toLowerCase();
     //移动终端浏览器版本信息
     return {
         trident: u.indexOf('Trident') > -1, //IE内核
         presto: u.indexOf('Presto') > -1, //opera内核
         webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
         gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
         mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
         ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
         android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
         iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
         iPad: u.indexOf('iPad') > -1, //是否iPad
         webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
         wechat: ua.match(/MicroMessenger/i) == "micromessenger",//微信
         weibo: ua.match(/WeiBo/i) == "weibo",//微博
         qq: ua.match(/QQ/i) == "qq"//QQ空间
     };
};
 
exports.browser=browser;

基本的判断都有,可以根据判断的结果给出不同的响应~

本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/5013028.html,如需转载请自行联系原作者

相关文章
|
5天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
22 0
|
5天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
17 0
springboot从控制器请求至页面时js失效的解决方法
|
5天前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
5天前
|
JavaScript
如何使用JS控制指定页面大小开启全屏和退出全屏
如何使用JS控制指定页面大小开启全屏和退出全屏
27 0
|
5天前
|
JavaScript 数据安全/隐私保护
|
5天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
17 0
|
5天前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
35 0
|
3天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
5天前
|
JavaScript 前端开发
JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束
【5月更文挑战第13天】JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束。在游戏开发中,闭包常用于创建独立状态的角色实例。例如,`createCharacter`函数生成角色,内部函数(如`getHealth`、`setHealth`)形成闭包,保存角色的属性(如生命值)。这样,每个角色实例都有自己的变量副本,不互相影响,从而实现角色系统的独立性。
21 0
|
5天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
12 1