浏览器解析html过程

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS判断页面在哪个浏览器打开(QQ、微信、微博、安卓、IOS、PC)</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>
  <body>
    <div class="from"></div>
  </body>
  <script>
    const browser = {
      versions: function() {
        const u = navigator.userAgent, // 用户设备
          app = navigator.appVersion; // 浏览器版本
        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应该程序，没有头部与底部
        };
      }(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };
    const ua = navigator.userAgent.toLowerCase(); // 获取判断用的对象
    // 在移动设备打开
    if (browser.versions.mobile) {
      // 在IOS浏览器打开
      if (browser.versions.iOS) {
        $('.from').html("IOS浏览器");
      }
      // 在安卓浏览器打开
      if (browser.versions.Android) {
        $('.from').html("android浏览器");
      }
      // 在微信中打开
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        $('.from').html("微信");
      }
      // 在新浪微博客户端打开
      if (ua.match(/WeiBo/i) == "weibo") {
        $('.from').html("微博");
      }
      // 在QQ空间打开
      if (ua.match(/QQ/i) == "qq") {
        $('.from').html("QQ");
      }
    }
    // 在PC浏览器打开
    else {
      // IE浏览器
      if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
        $('.from').html("IE");
        version = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1]; // 浏览器版本
      }
      // 火狐浏览器
      else if (ua.match(/firefox/) != null) {
        $('.from').html("火狐");
      }
      // UC浏览器
      else if (ua.match(/ubrowser/) != null) {
        $('.from').html("UC");
      }
      // 欧朋浏览器
      else if (ua.match(/opera/) != null) {
        $('.from').html("欧朋");
      }
      // 百度浏览器
      else if (ua.match(/bidubrowser/) != null) {
        $('.from').html("百度");
      }
      // 搜狗浏览器
      else if (ua.match(/metasr/) != null) {
        $('.from').html("搜狗");
      }
      // QQ浏览器
      else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        $('.from').html("QQ");
      }
      // 遨游浏览器
      else if (ua.match(/maxthon/) != null) {
        $('.from').html("遨游");
      }
      // 360浏览器
      else if (ua.match(/chrome/) != null) {
        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");

        function _mime(option, value) {
          var mimeTypes = navigator.mimeTypes;
          for (var mt in mimeTypes) {
            if (mimeTypes[mt][option] == value) {
              return true;
            }
          }
          return false;
        }

        if (is360) {
          $('.from').html("360");
        } else {
          $('html').css("zoom", ".80");
        }
      }
      // Safari浏览器
      else if (ua.match(/safari/) != null) {
        $('.from').html("Safari");
      }
      // 其他浏览器
      else {
        $('.from').html("PC浏览器");
      }
    }
  </script>
</html>
知秋君

相关推荐
