• JS


    最近半年来一直在微信小程序,微信公众号打转,小程序就不说了,跟这个没得关系,公众号页面以及一些附属的H5页面,很多时候会通过微信直接分享出去。虽然公众号页面也是H5网页,但有时候又是特殊的H5页面,特殊就特殊在只能微信浏览器内打开,在其他浏览器或其他应用的浏览器打开有些功能无法正常使用;而且还可能存在一些其他定制功能,又只能在桌面浏览器内打开等等,总之一句话:就是要判定网页打开的运行环境

    具体通过判断navigator对象内userAgent中是否存在关键字micromessenger,存在则是微信内置浏览器,反之不是。

    function isWeChat() {
      let ua = window.navigator.userAgent.toLowerCase();
      return ua.match(/MicroMessenger/i) == "micromessenger"; // 判定为true则是微信浏览器,false则不是
    }

    也可以写成

    function isWeChat() {
      let ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;// 是微信浏览器
      } else {
        return false;// 不是
      }
    }

    升级版,上面的代码只能判定当前环境是否是微信浏览器,对于其他的,如:是否是移动端浏览器还是PC端浏览器,则无能为力。

    function judgeEnv() {
      var system = {
        win: false,
        mac: false,
        xll: false,
        ipad: false
      };
      // 检测网页运行平台
      var p = window.navigator.platform;
      system.win = p.indexOf("Win") == 0; // windows
      system.mac = p.indexOf("Mac") == 0; // 苹果
      system.x11 = p == "X11" || p.indexOf("Linux") == 0; // Linux
      system.ipad = navigator.userAgent.match(/iPad/i) != null ? true : false;  // iPad
    
      if (system.win || system.mac || system.xll || system.ipad) {  // 在PC端上打开的
        return system;
      } else {  // 在手机端打开的则直接跳转到wap.baidu.com页面
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {  // 在手机端微信上打开的(注:这里不能用===,具体看打印)
          return true;
        } else {  // 在手机上非微信上打开的
          return false;
        }
      }
    }

    这个升级版也只是初级升级,如果要更加细致化的升级,PC端还得判定是什么浏览器(或什么内核的浏览器),如:IE,谷歌,火狐等等,以及国内的360,QQ,百度等等。如:

    最后:这类运行环境(平台)的判定实际上只需要在页面打开时系统启动时判定一次就够了,然后基于判定跳转到对应的指示页面,因此后面基本不会再用,不需要每个页面都进行判定(特定页面定制执行环境除外)。

    既然只是基于这个判定进行对应的操作,那么我们完全可以将该方法封装成一个自执行函数,在项目启动或页面打开的初期勾子函数内自动执行一遍,然后不管后面是只用一次还是无数次,都只需读取这个判定结果就是,并不需要每次都再执行该函数。

    let isWeChat = false; // 是否是微信端打开 状态变量(默认不是)
    (function () {
      var system = {
        win: false,
        mac: false,
        xll: false,
        ipad: false
      };
      // 检测网页运行平台
      var p = window.navigator.platform;
      system.win = p.indexOf("Win") == 0; // windows
      system.mac = p.indexOf("Mac") == 0; // 苹果
      system.x11 = p == "X11" || p.indexOf("Linux") == 0; // Linux
      system.ipad = navigator.userAgent.match(/iPad/i) != null ? true : false;  // iPad
    
      if (system.win || system.mac || system.xll || system.ipad) {  // 在PC端上打开的
        isWeChat = false;
      } else {  // 在手机端打开的则直接跳转到wap.baidu.com页面
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {  // 在手机端微信上打开的(注:这里不能用===,具体看打印)
          isWeChat = true;
        } else {  // 在手机上非微信上打开的
          isWeChat = false;
        }
      }
    })();
  • 相关阅读:
    LeetCode 32.使数组唯一的最小增量
    LeetCode 31. 最小的k个数 快速排序+堆排序+二叉搜索树
    LeetCode 30. 最长回文串
    LeetCode 29. 矩形重叠 反向思维
    LeetCode 28. 拼写单词 HashMap赋值给另一个HashMap
    LeetCode 27. 字符串压缩
    Java SSM Spring+Spring MVC+Mybatis整合
    LeetCode 26.岛屿的最大面积 DFS深度遍历问题
    LeetCode 25.最长上升子序列 动态规划
    LeetCode 24.找出数组中出现次数大于二分之一数组长度的数
  • 原文地址:https://www.cnblogs.com/donghuang/p/14954329.html
Copyright © 2020-2023  润新知