HTML5發展到現在,雖說沒有大規模的普及,但在我們日常人生中,也很容易見到了,HTML5的遊戲、網站、應用程式也是層出不窮。引入的API,並附上各個API 的瀏覽器檢測方法,我主要參考了最近看的《html5揭秘》和《html5高級程式設計》。一個用來偵測瀏覽器對HTML5 和CSS3 特性支援情況的開源Javascript
類別庫,現在最新的是2.5.3 版(下載),使用方法很簡單,在頁面裡引入JS 後,它會自動運行,並建立一個Modernizr 全域物件,它為每一個可以偵測的特性都建立了一個對應的布林類型的屬性,我們只要去呼叫就行了,例如:if( Modernizr.canvas ){
// 恩,我知道这个属性,他是画图用的:)
}
else{
// canvas 这是个什么东东??
}
1.Canvas
這兩個元素的出現,讓開發人員不必使用插件來播放音頻或視頻,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;
var hasVideo = document.createElement("video").canPlayType('video/ogg; codecs="theora, vorbis"'); // modernizr检测方法 var hasVideo = Modernizr.video.ogg;4.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中文網其他相關文章!