主页 > 网站建设 >

JS判断访客浏览器环境（pc端，移动端，还是微

网站建设 2022-07-27 08:02www.1681989.com免费网站
今天突然看到一段很好的代码，分享给大家，顺便也给自己留个笔记。我们部署在Web服务器上的前端应用，既可以用PC浏览器访问，也可以用手机浏览器访问，再加上现在智能设备的推广，我们甚至能在车载系统、穿戴设备和电视平台上访问。设备的多样化让用户无处不在，有时候我们需要根据不同的浏览器运行环境做出对应的处理。浏览器是JavaScript的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我们的业务逻辑。 浏览器品牌众多， […]



今天突然看到一段很好的代码，分享给大家，顺便也给自己留个笔记。我们部署在Web服务器上的前端应用，既可以用PC浏览器访问，也可以用手机浏览器访问，再加上现在智能设备的推广，我们甚至能在车载系统、穿戴设备和电视平台上访问。设备的多样化让用户无处不在，有时候我们需要根据不同的浏览器运行环境做出对应的处理。浏览器是JavaScript的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我们的业务逻辑。

浏览器品牌众多，有些浏览器使用的标准也不太一样，造就了难以统一的判断。下面我大概罗列一下常用的浏览器品牌和在什么情况下使用浏览器运行环境判断。

方法一

  1. // 判断浏览器函数
  2.   function isMobile(){
  3.     if(wdow.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Wdows Phone)/i)) {
  4.       return true; // 移动端
  5.     }else{
  6.       return false; // PC端
  7.     }
  8.   }

方法二

  1. var os = function() { 
  2.    var ua = navigator.userAgent, 
  3.    isWdowsPhone = /(?:Wdows Phone)/.test(ua), 
  4.    isSymbian = /(?:SymbianOS)/.test(ua) || isWdowsPhone,  
  5.    isAndroid = /(?:Android)/.test(ua),  
  6.    isFireFox = /(?:Firefox)/.test(ua),  
  7.    isChrome = /(?:Chrome|CriOS)/.test(ua), 
  8.    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), 
  9.    isPhone = /(?:iPhone)/.test(ua) && !isTablet, 
  10.    isPc = !isPhone && !isAndroid && !isSymbian; 
  11.    return { 
  12.      isTablet: isTablet, 
  13.      isPhone: isPhone, 
  14.      isAndroid : isAndroid, 
  15.      isPc : isPc 
  16.    }; 
  17. }(); 
  18.  
  19. // 使用方法 
  20. if(os.isAndroid || os.isPhone){
  21. alert("-----");
  22. }

判断是否为微信客户端

  1. var isWechart = function () {
  2.     var rst = true
  3.     if(wdow.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Wdows Phone)/i)){
  4.       var ua = navigator.userAgent.toLowerCase();
  5.       if (!(ua.match(/MicroMessenger/i) == "micromessenger")) {
  6.         rst = false;
  7.       }
  8.     }else {
  9.       rst = false;
  10.     }
  11.     return rst;
  12.   }

判断微信浏览器是PC端还是手机端，以及手机端是微信浏览器还是非微信浏览器

  1. //平台、设备和操作系统  
  2.      var system = { 
  3.        w: false, 
  4.        mac: false, 
  5.        xll: false, 
  6.        ipad: false 
  7.      }; 
  8.      //检测平台  
  9.      var p = navigator.platform; 
  10.      system.w = p.dexOf("W") == 0; 
  11.      system.mac = p.dexOf("Mac") == 0; 
  12.      system.x11 = (p == "X11") || (p.dexOf("Lux") == 0); 
  13.      system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false; 
  14.      //跳转语句，如果是手机访问就自动跳转到wap.baidu.页面  
  15.      if (system.w || system.mac || system.xll || system.ipad) { 
  16.        alert("在PC端上打开的");
  17.      } else { 
  18.        var ua = navigator.userAgent.toLowerCase();  
  19.        if(ua.match(/MicroMessenger/i)=="micromessenger") {  
  20.          alert("在手机端微信上打开的"); 
  21.        } else {  
  22.          alert("在手机上非微信上打开的"); 
  23.        }  
  24.      }

下面是其他应用场景，注释中表明了通过JS如何判断是否在微信浏览器打开，是否在QQ空间浏览器，是否在新浪微博打开。可以做得更完善一点，再加上判断是在移动设备打开还是在PC端浏览器打开的，更加细分一点，可以判断是在安卓系统的浏览器打开的还是IOS系统浏览器打开的。

  1. if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
  2.         var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
  3.         if (ua.match(/MicroMessenger/i) == "micromessenger") {
  4.                 //在微信中打开
  5.         }
  6.         if (ua.match(/WeiBo/i) == "weibo") {
  7.                 //在新浪微博客户端打开
  8.         }
  9.         if (ua.match(/QQ/i) == "qq") {
  10.                 //在QQ空间打开
  11.         }
  12.         if (browser.versions.ios) {
  13.                 //是否在IOS浏览器打开
  14.         } 
  15.         if(browser.versions.android){
  16.                 //是否在安卓浏览器打开
  17.         }
  18. } else {
  19.         //否则就是PC浏览器打开
  20. }

再附上browser的代码，通过推火网以下方法可以判断很多浏览器。包括判断IE浏览器，Opera浏览器，苹果浏览器，谷歌浏览器，火狐浏览器等。

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

写到得差不多了，后续如果我想起还有哪些判断浏览器运行环境终极方案遗漏的，会继续在这篇文章上补全，也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。


上一篇：

织梦dede搜索实现标题完全精准搜索

 下一篇：

终极代码禁止查看网页源代码方法

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by