html5 新特性支持的浏览器检测

最新推荐文章于 2021-05-30 19:17:12 发布

iteye_11495

最新推荐文章于 2021-05-30 19:17:12 发布

阅读量190

点赞数

文章标签：网络 javascript ViewUI

<!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浏览器上查看