[置顶] html5 新特性支持的浏览器检测
<!Document html>
<html>
<head>
<meta charset="gbk">
</head>
<body>
<form>
<!-- html5 forms -->
<input type="email" required maxLength="100" minLength="18">
<input type="submit" value="SUBMIT">
</form>
<br>
<br>
</body>
<script type="text/javascript">
<!-- html5 canves API -->
try{
document.createElement("canvas").getContext("2d");
document.write("浏览器支持html5 canvas\n");
}catch(e){
console.log("浏览器不支持html5 canvas\n");
}
<!-- html5 audio video-->
var hasVideo = !!(document.createElement('video').canPlayType);
if(hasVideo){
document.write("浏览器支持html5 audio video\n");
}else{
document.write("浏览器不支持html5 audio video\n");
}
<!-- html5 geolocation API -->
if(navigator.geolocation){
document.write("浏览器支持html5 geolocation API\n");
}else{
document.write("浏览器不支持html5 geolocation API\n");
}
<!-- html5 跨文档消息通讯 communication API-->
if(typeof window.postMessage === undefined){
document.write("浏览器支持html5跨文档消息通讯\n");
}else{
document.write("浏览器不支持html5 跨文档消息通讯\n");
}
<!-- html5 XMLHttpRequest Level2的跨源请求支持-->
var xhr = new XMLHttpRequest();
if(typeof xhr.withCredentials === undefined){
document.write("浏览器支持html5XMLHttpRequest Level2的跨源请求支持\n");
}else{
document.write("浏览器不支持html5 XMLHttpRequest Level2的跨源请求支持\n");
}
<!-- html5 websocket-->
if(window.WebSocket){
document.write("浏览器支持html5websocket\n");
}else{
document.write("浏览器不支持html5 websocket\n");
}
<!-- html5 web workers API -->
if(typeof(Worker)!=="undefined"){
document.write("浏览器支持html5web workers API\n");
}else{
document.write("浏览器不支持html5web workers API\n");
}
<!-- html5 web storage API -->
if(window.sessionStorage){
document.write("浏览器支持html5 sessionStorage\n");
}else{
document.write("浏览器不支持html5 sessionStorage\n");
}
if(window.localStorage){
document.write("浏览器支持html5localStorage\n");
}else{
document.write("浏览器不支持html5 localStorage\n");
}
<!-- html5 离线Web应用 -->
if(window.applicationCache){
document.write("浏览器支持html5离线Web应用\n");
}else{
document.write("浏览器不支持html5 离线Web应用\n");
}
</script>
</html>
在我的chrome浏览器上查看
其他浏览器只要打开上面那个html的页面即可查看支持情况。
