H5支持度检测常用模式(仅干货)

浏览器支持检测

 Modernizr库，不详讲

canvas

• 即使浏览器支持 canvas API，它也不一定支持 canvas text API，检测 canvas 同时还要检测 canvas text API

function supports_video() {
    return !!document.createElement('canvas').getContext
}

video

• 不支持video标签的浏览器会自动忽略，开发者需要用flash等技术替代
• 检测技术来检测浏览器支持的视频格式

function supports_video() {
    if (!document.createElement('video').canPlayType) return false;
    // 常用几种视频格式，每一项是需要传给canPlayType函数的参数
    const videoTypes = [
      'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
      'video/ogg; codecs="theora, vorbis"',
      'video/webm; codecs="vp8, vorbis"',
    ]


  const v = document.createElement("video");
  const res = {}
  videoTypes.forEach(item => {
    const _key = item.match(/\w+(?=\;)/)[0];
    res[_key] =  v.canPlayType(item);
  })
  return res
}

<!--"probably"：浏览器能够支持该格式视频；-->
<!--"maybe"：浏览器可能能播放该格式视频；-->
<!--""（空字符串）：浏览器不能播放该格式视频。-->

运行结果：
{"mp4":"probably","ogg":"probably","webm":"probably"}

本地存储

如果浏览器支持 HTML5 存储，那么全局的window对象将会有一个localStorage属性；否则该属性将会是undefined的,但是老版本火狐有个bug，如果 cookie 被禁用，会抛出异常

function supports_local_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e){
        return false;
    }
}

表单

1. H5新增了多项表单的type值，检测支持type程度

function supports_input_type(type){
    if(typeof type !== 'string') return false
    <!--创建一个空表单元素-->
    const i = document.createElement('input')
    <!--为表单设置类型，如果支持就会显示对应的表单，如果不支持则默认type 为text-->
    i.setAttribute('type', type)
    如果传进来的为text类型，则返回支持，不然判断设置的type生效没，如果没生效 i.type 就会变为默认的text， 说明不支持
    return type === 'text' ? true : i.type !=='text'
}

2. 检测placeholder、autofocus属性的兼容性

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}

function supports_input_autofocus() {
    var i = document.createElement('input');
    return 'autofocus' in i;
}

History API

“HTML5 history API 提供了一组标准函数，使得我们可以通过脚本维护浏览器历史。这个 API 的一部分——历史导航——在早期版本的 HTML 里面已经实现了。HTML5 新增加的部分是，增加浏览器历史的条目，响应用户使用后退按钮访问浏览器历史等等。这意味着 URL 现在仍然可以作为当前资源的唯一标识符，甚至在全部由脚本构成的应用程序中也是这样（这里是说，对于无需整页刷新的 AJAX 程序，URL 一般不能准确的标识出当前资源，因为你的页面不是整页刷新，URL 不会随着显示内容的不同而有不同。但是使用了 history API，我们就可以解决这一问题）。”

摘录来自: DevBean. “Dive Into HTML5 中文版。” iBooks.

function supports_history_api() {
    return !!(window.history && history.pushState);
}

地理位置

function supports_geolocation() {
    return !!navigator.geolocation; //  注意是navigator
}

其他通用模式

• Web Workers

function supports_web_workers() {
    return !!window.Worker;
}

• applicationCache

function supports_offline() {
    return !!window.applicationCache;
}