HTML5 API瀏覽器支援情況偵測的詳情介紹-H5教程-PHP中文網

HTML5發展到現在，雖說沒有大規模的普及，但在我們日常人生中，也很容易見到了，HTML5的遊戲、網站、應用程式也是層出不窮。引入的API，並附上各個API 的瀏覽器檢測方法，我主要參考了最近看的《html5揭秘》和《html5高級程式設計》。一個用來偵測瀏覽器對HTML5 和CSS3 特性支援情況的開源Javascript

類別庫

，現在最新的是2.5.3 版（下載），使用方法很簡單，在頁面裡引入JS 後，它會自動運行，並建立一個Modernizr 全域物件，它為每一個可以偵測的特性都建立了一個對應的布林類型的屬性，我們只要去呼叫就行了，例如：

if( Modernizr.canvas ){  
// 恩，我知道这个属性，他是画图用的：）
}
else{  
// canvas 这是个什么东东？？
}

登入後複製

1.Canvas

Canvas是依賴解析度的位圖畫布，其繪製的圖形是不可縮放的，你可以透過Javascript 在Canvas 上面繪製任何圖形，甚至載入照片，HTML5標準制定了一系列Canvas API，用於繪製簡單的圖形、定義路徑、創建漸變及應用圖像變換等。預設寬300 像素，高150 像素。 .Audio 和Video

這兩個元素的出現，讓開發人員不必使用插件來播放音頻或視頻，HTML5規範還提供了通用的、完整的、可腳本化控制的API。 #

// 创建一个 Canvas 元素，并检查该元素是否拥有 getContext() 方法，然后用双否定强制返回一个布尔值
var hasCanvas = !!document.createElement("canvas").getContext;
// Modernizr检测方法，返回布尔值
var hasCanvas = Modernizr.canvas ;

登入後複製

想檢測是否支援默寫格式，可以這麼寫：

// 创建一个 Audio 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasAudio = !!document.createElement("audio").canPlayType;
// modernizr检测方法
var hasAudio = Modernizr.audio;
// 创建一个 Video 元素，并检查该元素是否拥有 canPlayType() 方法，然后用双否定强制返回一个布尔值
var hasVideo = !!document.createElement("video").canPlayType;
// modernizr检测方法
var hasVideo = Modernizr.video;

登入後複製

原生方法會返回“probably”，”maybe” 或“”，分別代表“完全有把握播放此格式”，”有可能可以播放此格式”，“確定無法播放此格式”。canPlayType() 方法傳入的參數用文字表達就是在問瀏覽器，能否播放封裝在ogg 容器內的“theora” 編碼格式的影片和「vorbis」格式的音訊。載入時儲存，並且容易取得。在開啟新視窗或新標籤頁

以及重新啟動瀏覽器時，開發人員可以選擇是否要啟動這些資料。儲存的資料不會再網路上傳輸，並且可以保存高達數兆位元組的大數據。

var hasVideo = document.createElement("video").canPlayType(&#39;video/ogg; codecs="theora, vorbis"&#39;)；
// modernizr检测方法
var hasVideo = Modernizr.video.ogg;

登入後複製

4.Web Workers

Web Workers 可以讓 Web 應用程式具備後台處理能力，它對多執行緒的支援非常好。因此，使用了 HTML5 的 Javascript 應用程式可以充分利用多核心 CPU 帶來的優勢，把耗時長的任務指派給 Web Workers 執行。

注意：在 Web Workers 中執行的腳步無法存取該頁面的 window 物件。

// 支持的话，全局 window 对象会有一个 localStorage 属性
var hasWebStorage = window.localStorage;
// modernizr检测方法
var hasWebStorage = Modernizr.localstorage;

登入後複製

5.Offline Web Applications

HTML5 的離線應用程式快取使得在無網路連線狀態下執行應用程式成為可能。當第一次造訪具備離線存取功能的 Web 網站時，網路伺服器會告訴瀏覽器哪些檔案時保證離線正常運作所必需的，這些檔案可以使任意的檔案－HTML、Javascript、圖片或是影片。

// 支持的话，全局 window 对象会有一个 Worker 属性
var hasWorker = window.Worker;
// modernizr检测方法
var hasWorker = Modernizr.webworkers;

登入後複製

6.GeolocationHTML5 的地理定位 API 能夠定位出你在世界的什麼地方，並在允許的情況下把該位置資訊共用出去。這個神奇的功能可以建立出許多有趣的應用程式。例如計算跑步的路程，基於 GPS 導航的社交應用程式等等。它透過 IP 位址、GPS地理定位、Wi-Fi地理定位、手機地理定位、自訂地理定位來獲取定位資料。

// 支持的话，全局 window 对象会有一个 applicationCache 属性
var hasApplicationCache = window.applicationCache;
// modernizr检测方法
var hasApplicationCache = Modernizr.applicationcache ;

登入後複製

7.Forms
HTML5 中定義了許多新的輸入框類型：表示搜尋的search、數字類型輸入框number、範圍選擇滑桿range、顏色選擇器color、電話號碼輸入框tel、網址輸入框url、郵件輸入框email、日期選擇器date、月份輸入框month、星期輸入框week、時間戳輸入框time、精確表示日期/時間戳出入框datetime、當地日期和時間輸入框datetime-local。

// 创建一个 input 元素，该元素默认是 text 类型，改变他的类型，然后查看改变是否被保留
var o = document.createElement("input");o.setAttribute("type","color");return i.type != "text";
// modernizr检测方法
var hasInputType = Modernizr.inputtypes.color;

登入後複製

8.WebSockets
WebSockets 是 HTML5 中最强大的通信功能，它定义了一个全双工通信通道（又称为双向同时通信，即通信的双方可以同时发送和接受信息的信息交互方式），仅通过 Web 上的一个 Socket 即可进行通信。它不仅仅是对常规 HTTP 通信的另一种增量加强，更代表着一次巨大的进步，对实时的、事件驱动的程序而言更是如此。

// 支持的话，全局 window 对象会有一个 webSocket 属性
var hasWebSocket = window.webSocket;
// modernizr检测方法
var hasWebSocket = Modernizr.websockets;

登入後複製

8.Communication
Communication 是 HTML5 中用来实现正在运行的两个页面之间（iframe、标签页、窗口）进行跨源通信和信息共享的API。它把 postMessage API 定义为发送消息的标准方式。

// 支持的话，全局 window 对象会有一个 postMessage 属性
var hasPostMessage = window.postMessage;
// modernizr检测方法
var hasPostMessage = Modernizr.postmessage;

登入後複製

API 的浏览器支持情况主要介绍这些，以后我会逐个 API 进行详细讲解，把自己学到和研究的东西共享出来，欢迎大家来一块交流学习：）

以上是HTML5 API瀏覽器支援情況偵測的詳情介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！