H5支援度檢測常用模式(僅乾貨)

禹發表於2019-03-29
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'
}

複製程式碼
  1. 檢測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;
}
複製程式碼

相關文章