[置顶] 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的页面即可查看支持情况。