Feature.js-轻量级浏览器特性检测JavaScript库插件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Feature.js-轻量级浏览器特性检测JavaScript库插件相关的知识，希望对你有一定的参考价值。

简要教程

Feature.js是一款轻量级的浏览器特性检测javascript库插件。该插件运行速度快，使用简单，文件只有1kb大小。通过Feature.js你可以检测客户浏览器是否支持某些特性，并针对这些特性编写代码。

Feature.js会自动在页面初始化时进行加载，但是它不会自动进行特性检测，直到你在代码中调用它时才会进行指定特性的检测。

通过Feature.js你可以对浏览器进行特性检测，例如检测浏览器是否支持CSS 3D transforms，为支持该特性的浏览器编写代码来操纵元素进行3D转换，在不支持该特性的浏览器中可以执行其他的操作。

技术分享

查看演示       下载插件

使用方法

首先你需要在页面中引入feature.js文件，你不需要对其进行初始化，只需引入文件即可。

<script src="js/feature.js"></script>

接着你就可以使用特性检测来检测浏览器是否支持某些特性，例如：

if (feature.webGL) {
  console.log("你的浏览器支持WebGL");
} else {
  console.log("你的浏览器不支持WebGL");
}

如果你希望像Modernizr那样当浏览器支持某些特性时，在<html>元素上添加相应的class，可以像下面这样操作：

if (feature.webGL) {
  document.documentElement.className += " webgl";
}

如果你使用jquery，那操作就更简单了：

if (feature.webGL) {
  $("html").addClass("webgl");
}

你也可以同时进行多选特性的检测：

if (feature.canvas && feature.webGL) {
  console.log("你的浏览器支持Canvas和WebGL")
}

如果你的JavaScript代码只有在浏览器支持某些特性时才有意义，那么你可以在一个函数中检测这些特性，如果浏览器不支持这些特性，直接返回，否则才执行相应的JS代码。

(function() {
  if (!feature.webGL || !feature.svg) {
    console.log("Stopping… WebGL or SVG isn’t supported");
    return;
  }
  console.log("Browser supports both WebGL & SVG");
})();

API reference

下面是Feature.js可进行的浏览器检测的特性列表。

  • feature.async
  • feature.addEventListener
  • feature.canvas
  • feature.classList
  • feature.cors
  • feature.contextMenu
  • feature.css3Dtransform
  • feature.cssTransform
  • feature.cssTransition
  • feature.defer
  • feature.deviceMotion
  • feature.deviceOrientation
  • feature.geolocation
  • feature.historyAPI
  • feature.placeholder
  • feature.localStorage
  • feature.matchMedia
  • feature.pictureElement
  • feature.querySelectorAll
  • feature.remUnit
  • feature.serviceWorker
  • feature.sizes
  • feature.srcset
  • feature.svg
  • feature.touch
  • feature.viewportUnit
  • feature.webGL

Feature.js浏览器特性检测插件的github地址为：https://github.com/viljamis/feature.js

 

附源码：

/*!
  * FEATURE.JS 1.0.1, A Fast, simple and lightweight browser feature
  * detection library in just 1kb.
  *
  * http://featurejs.com
  *
  * CSS 3D Transform, CSS Transform, CSS Transition, Canvas, SVG,
  * addEventListener, querySelectorAll, matchMedia, classList API,
  * placeholder, localStorage, History API, Viewport Units, REM Units,
  * CORS, WebGL, Service Worker, Context Menu, Geolocation,
  * Device Motion, Device Orientation, Touch, Async, Defer,
  * Srcset, Sizes & Picture Element.
  *
  *
  * USAGE EXAMPLE:
  * if (feature.webGL) {
  * console.log("webGL supported!");
  * }
  *
  * Author: @viljamis, https://viljamis.com
  */
   
  /* globals DocumentTouch */
  ;(function (window, document, undefined) {
  "use strict";
   
  // For minification only
  var docEl = document.documentElement;
   
   
  /**
  * Utilities
  */
  var util = {
   
  /**
  * Simple create element method
  */
  create : function(el) {
  return document.createElement(el);
  },
   
  /**
  * Test if it‘s an old device that we want to filter out
  */
  old : !!(/(android\s(1.|2.))|(Silk\/1.)/i.test(navigator.userAgent)),
   
  /**
  * Function that takes a standard CSS property name as a parameter and
  * returns it‘s prefixed version valid for current browser it runs in
  */
  pfx : (function() {
  var style = document.createElement("dummy").style;
  var prefixes = ["Webkit", "Moz", "O", "ms"];
  var memory = {};
  return function(prop) {
  if (typeof memory[prop] === "undefined") {
  var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1),
  props = (prop + " " + prefixes.join(ucProp + " ") + ucProp).split(" ");
  memory[prop] = null;
  for (var i in props) {
  if (style[props[i]] !== undefined) {
  memory[prop] = props[i];
  break;
  }
  }
  }
  return memory[prop];
  };
  })()
   
  };
   
   
  /**
  * The Feature.js object
  */
   
  var Feature = {
  // Test if CSS 3D transforms are supported
  css3Dtransform : (function() {
  var test = (!util.old && util.pfx("perspective") !== null);
  return !!test;
  })(),
   
  // Test if CSS transforms are supported
  cssTransform : (function() {
  var test = (!util.old && util.pfx("transformOrigin") !== null);
  return !!test;
  })(),
   
  // Test if CSS transitions are supported
  cssTransition : (function() {
  var test = util.pfx("transition") !== null;
  return !!test;
  })(),
   
  // Test if addEventListener is supported
  addEventListener : !!window.addEventListener,
   
  // Test if querySelectorAll is supported
  querySelectorAll : !!document.querySelectorAll,
   
  // Test if matchMedia is supported
  matchMedia : !!window.matchMedia,
   
  // Test if Device Motion is supported
  deviceMotion : ("DeviceMotionEvent" in window),
   
  // Test if Device Orientation is supported
  deviceOrientation : ("DeviceOrientationEvent" in window),
   
  // Test if Context Menu is supported
  contextMenu : ("contextMenu" in docEl && "HTMLMenuItemElement" in window),
   
  // Test if classList API is supported
  classList : ("classList" in docEl),
   
  // Test if placeholder attribute is supported
  placeholder : ("placeholder" in util.create("input")),
   
  // Test if localStorage is supported
  localStorage : (function() {
  var test = "x";
  try {
  localStorage.setItem(test, test);
  localStorage.removeItem(test);
  return true;
  } catch(err) {
  return false;
  }
  })(),
   
  // Test if History API is supported
  historyAPI : (window.history && "pushState" in window.history),
   
  // Test if ServiceWorkers are supported
  serviceWorker : ("serviceWorker" in navigator),
   
  // Test if viewport units are supported
  viewportUnit : (function(el) {
  try {
  el.style.width = "1vw";
  var test = el.style.width !== "";
  return !!test;
  } catch(err) {
  return false;
  }
  })(util.create("dummy")),
   
  // Test if REM units are supported
  remUnit : (function(el) {
  try {
  el.style.width = "1rem";
  var test = el.style.width !== "";
  return !!test;
  } catch(err) {
  return false;
  }
  })(util.create("dummy")),
   
  // Test if Canvas is supported
  canvas : (function(el) {
  return !!(el.getContext && el.getContext("2d"));
  })(util.create("canvas")),
   
  // Test if SVG is supported
  svg : !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect,
   
  // Test if WebGL is supported
  webGL : (function(el) {
  try {
  return !!(window.WebGLRenderingContext && (el.getContext("webgl") || el.getContext("experimental-webgl")));
  } catch(err) {
  return false;
  }
  })(util.create("canvas")),
   
  // Test if cors is supported
  cors : ("XMLHttpRequest" in window && "withCredentials" in new XMLHttpRequest()),
   
  // Tests if touch events are supported, but doesn‘t necessarily reflect a touchscreen device
  touch : !!(("ontouchstart" in window) || window.navigator && window.navigator.msPointerEnabled && window.MSGesture || window.DocumentTouch && document instanceof DocumentTouch),
   
  // Test if async attribute is supported
  async : ("async" in util.create("script")),
   
  // Test if defer attribute is supported
  defer : ("defer" in util.create("script")),
   
  // Test if Geolocation is supported
  geolocation : ("geolocation" in navigator),
   
  // Test if img srcset attribute is supported
  srcset : ("srcset" in util.create("img")),
   
  // Test if img sizes attribute is supported
  sizes : ("sizes" in util.create("img")),
   
  // Test if Picture element is supported
  pictureElement : ("HTMLPictureElement" in window),
   
  // Run all the tests and add supported classes
  testAll : function() {
  var classes = " js";
  for (var test in this) {
  if (test !== "testAll" && test !== "constructor" && this[test]) {
  classes += " " + test;
  }
  }
  docEl.className += classes.toLowerCase();
  }
   
  };
   
  /**
  * Expose a public-facing API
  */
  window.feature = Feature;
   
  }(window, document));

以上是关于Feature.js-轻量级浏览器特性检测JavaScript库插件的主要内容，如果未能解决你的问题，请参考以下文章

前端需要知道的知识

《JavaScript高级程序设计》Chapter 9 客户端检测

手机浏览器如何防止被检测到设备信息

[转]JavaScript快速检测浏览器对CSS3特性的支持

java9新特性-22-总结

java8新特性-lambda