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';