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;
}
複製代碼