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




html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值