html5 Up and Running學習筆記（一）

html5 Up and Running學習筆記(一)

一、檢測瀏覽器是否支持某種html5特性的方法（從易到難）：

1、檢測全局對象（諸如window或者navigator）是否擁有特定的屬性。如：檢測地理位置

2、創建一個元素，然後檢測該元素的DOM對象是否擁有特定的屬性。如：檢測畫布canvas

3、創建一個元素，然後檢測這個元素的DOM對象是否擁有特定的方法，同時調用這個方法並檢查它的返回值。如：檢測視頻格式

4、創建一個元素，給這個元素的DOM對象設定特定的屬性值，然後檢查瀏覽器是否保留了該屬性值。

二、支持html5的瀏覽器檢測（原生js）

<audio>

return !!document.createElement('audio').canPlayType;

MP3格式的<audio>

var a = document.createElement('audio');

return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/,''));

Vorbis格式的<audio>

var a = document.createElement('audio');

return !!(a.canPlayType && a.canPlayType('audio/ogg;codecs="vorbis"').replace(/no/,''));

MAV格式的<audio>

var a = document.createElement('audio');

return !!(a.canPlayType && a.canPlayType('audio/wav;codecs="1"').replace(/no/,''));

AAC格式的<audio>

var a = document.createElement('audio');

return !!(a.canPlayType && a.canPlayType('audio/mp4;codecs="mp4a.40.2"').replace(/no/,''));

<canvas>

return !!document.createElement('canvas').getContext;

<canvas>文本API

var c = document.createElement('canvas');

return c.getContext && typeof c.getContext('2d').fillText == 'function';

<command>

return 'type' in document.createElement('command');

<datalist>

return 'options' in document.createElement('datalist');

<details>

return 'open' in document.createElement('details');

<device>

return 'type' in document.createElement('device');

<form>約束驗證

return 'noValidate' in document.createElement('form');

<iframe sandbox>

return 'sandbox' in document.createElement('iframe');

<iframe srcdoc>

return 'srcdoc' in document.createElement('iframe');

<input autofocus>自動聚焦

return 'autofocus' in document.createElement('input');

<input placeholder>佔位文本

return 'placeholder' in document.createElement('input');

<input type='color'>顏色選擇器

var i = document.createElement('input');

i.setAttribute('type','color');

return i.type !== 'text';

<input type="email"> email地址

var i = document.createElement('input');

i.setAttribute('type','email');

return i.type !== 'text';

<input type="number"> 數字選擇器

var i = document.createElement('input');

i.setAttribute('type','number');

return i.type !== 'text';

<input type="range">數字類型輸入框：滑塊

var i = document.createElement('input');

i.setAttribute('type','range');

return i.type !== 'text';

<input type="search"> 搜索框

var i = document.createElement('input');

i.setAttribute('type','search');

return i.type !== 'text';

<input type="tel">

var i = document.createElement('input');

i.setAttribute('type','tel');

return i.type !== 'text';

<input type="url">  web地址

var i = document.createElement('input');

i.setAttribute('type','url');

return i.type !== 'text';

<input type="date"> 日期選擇器

var i = document.createElement('input');

i.setAttribute('type','date');

return i.type !== 'text';

<input type="time"> 時間選擇器

var i = document.createElement('input');

i.setAttribute('type','time');

return i.type !== 'text';

<input type='datetime'> 日期時間選擇器

var i = document.createElement('input');

i.setAttribute('type','datetime');

return i.type !== 'text';

<input type="datetime-local"> 本地時間選擇器

var i = document.createElement('input');

i.setAttribute('type','datetime-local');

return i.type !== 'text';

<input type="month"> 月份選擇器

var i = document.createElement('input');

i.setAttribute('type','month');

return i.type !== 'text';

<input ype="week">  周選擇器

var i = document.createElement('input');

i.setAttribute('type','week');

return i.type !== 'text';

<meter>

return 'value' in document.createElement('meter');

<output>

return 'value' in document.createElement('output');

<progress>

return 'value' in document.createElement('progress');

<time>

return 'valueAsdate' in document.createElement('time');

<video>

return !!document.createElement('video').canPlayType;

<video>字幕

return 'track' in document.createElement('track');

<video poster>

return 'poster' in document.createElement('video');

<video> WebM格式

var v = document.createElement('video');

return !!(v.canPlayType && v.canPlayType('video/webm;codecs="vp8,vorbis"').replace(/no/,''));

<video> H.264格式

var v = document.createElement('video');

return !!(v.canPlayType && v.canPlayType('video/mp4,codecs="avc1.42E01E,mp4a.40.2"').replace(/no/,''));

Theora格式

var v = document.createElement('video');

return !!(v.canPlayType && v.canPlayType('video/ogg,codecs="theora,vorbis"').replace(/no/,''));

contentEditable

return 'isContentEditable' in document.createElement('span');

Cross-document messageing

return !!window.postMessage;

Drag and drop

return 'draggable'  in document.createElement('span');

文件API

return typeof FileReader != 'undefined';

Geolocation

return !!navigator.geolocation;

歷史

return !!(window.history && window.history.pushState && window.history.popState);

本地存儲

return ('localStorage' in window) && window['localStorage'] !== null;

微數據(Microdata)

return !!document.getItems;

離線Web應用程序

return !!window.applicationCache;

“服務器已發送（Server-sent）事件”

return typeof EventSource !== 'undefined';

會話存儲（Session storage）

try{

return ('sessionStorage' in window) && window['sessionStorage'] !== null;

}catch(e){

return false;

}

SVG

return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg,'svg'').createSVGRect);

text/html 中的SVG

var e = document.createElement('div);

e.innerHTML = '<svg></svg>';

return !!(window.SVGSVGElement && e.firstChild instanceof window.SVGSVGElement);

WebSimpleDB

return !!window.indexedDB;

Web Sockets

return !!window.WebSocket;

Web SQL Database

return !!window.openDatabase;

Web Workers

return !!window.Worker;

Undo

return typeof UndoManager !== 'undefined';