首页 > 技术文章 > js还能做的那些事

superil 2018-07-13 11:10 原文

1.获取网络情况

function getNetworkType() {
  var ua = navigator.userAgent;
  var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
  networkStr = networkStr.toLowerCase().replace('nettype/', '');
  var networkType;
  switch (networkStr) {
      case 'wifi':
          networkType = 'wifi';
          break;
      case '4g':
          networkType = '4g';
          break;
      case '3g':
          networkType = '3g';
          break;
      case '3gnet':
          networkType = '3g';
          break;
      case '2g':
          networkType = '2g';
          break;
      default:
          networkType = 'other';
  }
  return networkType;
}

2.获取当年是iOS还是Android

if (/iphone/i.test(navigator.userAgent)) {
    console.log('我是ios');
 } else if (/android/i.test(navigator.userAgent)) {
   console.log('我是Android');
 }

3.判断终端类型

var ua = window.navigator.userAgent;

var Platform = {
  "android": /android\s(\d+\.\d)/i.test(ua) ? +RegExp["\x241"] : 0,
  "ios": /iPad|iPod|iPhone/i.test(ua),
  "iphone": /iPhone\sOS\s(\d[_\d]*)/i.test(ua) ? +parseFloat(RegExp['\x241'].replace(/_/g, ".")) : 0,
  "ipad": /iPad.*OS\s(\d[_\d]*)/i.test(ua) ? +parseFloat(RegExp['\x241'].replace(/_/g, ".")) : 0,
  "ipod": /iPod\sOS\s(\d[_\d]*)/i.test(ua) ? +parseFloat(RegExp['\x241'].replace(/_/g, ".")) : 0,
  "mqqBrowser": /MQQBrowser\/(\d+)/i.test(ua) ? +parseFloat(RegExp['\x241']) : 0,
  "uc": /UC/i.test(ua) || /UCWEB/i.test(window.navigator.vendor),
  "micromessenger": /MicroMessenger/i.test(ua),
  "i9300": /i9300/i.test(ua),
  "Y610": /Y610-U00/i.test(ua),
  "huawei": /HUAWEI/i.test(ua),
  "sonyEricssonLT26i": /sonyEricssonLT26i/i.test(ua),
  "google": /google/i.test(window.navigator.vendor),
  "chrome": /Chrome\/([.0-9]*) /.test(ua) ? RegExp.$1 : null,
  "iosQQ": /(iPad|iPhone|iPod).*?QQ/g.test(ua), // 摘自手Q api(http://mqq.oa.com/api/), .*?的?阻止*的贪婪匹配
  "androidQQ": /\bV1_AND_SQ_/.test(ua), // 摘自手Q api
  "weibo": /T(?:X|encent)MicroBlog/gi.test(ua),
  "YiXin": /YiXin/gi.test(ua)
};

Platform.mobileQQ = Platform.iosQQ || Platform.androidQQ;

Platform.mqq = Platform.mqqBrowser; // Deprecated, TODO: remove it

/**
 * 检测是否为QQ手机浏览器v4。
 */
Platform.isQQBrowser4 = function() {
  return navigator != null && navigator.userAgent.indexOf("MQQBrowser/4.0") >= 0;
}

Platform.isQQBrowserCss = function() {
  return navigator == null || (navigator != null && (
    navigator.userAgent.indexOf("MQQBrowser/1") != -1 || navigator.userAgent.indexOf("MQQBrowser/2") != -1 ||
    navigator.userAgent.indexOf("MQQBrowser/3") != -1 || navigator.userAgent.indexOf("MQQBrowser/4") != -1 ||
    navigator.userAgent.indexOf("MQQBrowser/5.0") != -1 || navigator.userAgent.indexOf("MQQBrowser/5.1") != -1 ||
    navigator.userAgent.indexOf("MQQBrowser/5.2") != -1 || navigator.userAgent.indexOf("MQQBrowser/5.3") != -1));
}


/**
 * 检测是否支持css3.
 * iOS平台非UC浏览器 及 android 平台4.0以上版本原生浏览器和支持css3的qq浏览器
 */
Platform.supportsCSS3 = function supportsCSS3() {
  if (Platform.sonyEricssonLT26i || Platform.i9300 || Platform.Y610) {
    //特殊手机,css支持,但实现的不好,故强制使用dom版
    return false;
  }

  return (Platform.ios && !Platform.uc) ||
    (Platform.android >= 4 && Platform.mqq && !Platform.isQQBrowserCss()) ||
    (Platform.android >= 4 && !Platform.mqq && Platform.google && !Platform.uc);
};

/**
 * 解决9300,sin0,cos0异常的问题
 */
(function() {
  if (Platform.i9300) {
    var sin = Math.sin;
    var cos = Math.cos;
    Math.sin = function(r) {
      if (!r) {
        return 0;
      }
      return sin(r);
    }
    Math.cos = function(r) {
      if (!r) {
        return 1;
      }
      return cos(r);
    }
  }
})();

window.Platform = Platform;
if (typeof(module) !== 'undefined') {
  module.exports = Platform;
} else if (typeof define === 'function' && define.amd) {
  define([], function() {
    'use strict';
    return Platform;
  });
}

 4.监听页面的返回操作,做想做的事情

  pushHistory(); //先调用此方法,将#压入
  window.addEventListener("popstate", function(e) { 
    //这里写返回的时候想做的事情
  }, false); 
  function pushHistory() { 
    var state = { 
      title: "title", 
      url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
  }

 

推荐阅读