html5 Up and Running学习笔记(一)
2015-11-16 16:13
519 查看
html5 Up and Running学习笔记(一)
一、检测浏览器是否支持某种html5特性的方法(从易到难):
1、检测全局对象(诸如window或者navigator)是否拥有特定的属性。如:检测地理位置2、创建一个元素,然后检测该元素的DOM对象是否拥有特定的属性。如:检测画布canvas3、创建一个元素,然后检测这个元素的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';相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- HTML5中在客户端验证文件上传的大小
- 小白观察:微软释放出其基于 Chromium 的 Edge 浏览器
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法