`

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

    博客分类:
  • web
 
阅读更多

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

 


  • 大小: 66.6 KB
0
0
分享到:
评论

相关推荐

    检测浏览器支持哪些HTML5新特性的方法

    ### 检测浏览器支持哪些HTML5新特性的方法 #### 一、HTML5与浏览器兼容性概述 HTML5作为Web开发的一个重要里程碑,并非一个全新的概念,而是对现有HTML标准的一系列增强与扩展。尽管HTML5的标准仍在不断演进和完善...

    HTML5CSS3新特性的浏览器支持情况.pdf

    Modernizr是一个强大的JavaScript库,它可以帮助检测浏览器对HTML5和CSS3新特性的支持,并根据支持情况添加自定义的类到`&lt;html&gt;`元素,以便于在CSS中实现浏览器兼容性。 此外,考虑到IE11移除了"MSIE"标识并开始...

    让IE旧版本浏览器也支持HTML5的特性

    标题 "让IE旧版本浏览器也支持HTML5的特性" 暗示了本文将讨论如何在Internet Explorer(IE)的老版本中启用HTML5的新功能。HTML5是超文本标记语言的最新版本,引入了许多增强的网页开发功能,如音频和视频嵌入、离线...

    ie9以下老浏览器不支持HTML5的解决方法

    1. **使用polyfills**:Polyfills是一种JavaScript库,用于向旧版浏览器添加对HTML5新特性的支持。通过加载相应的polyfill脚本,可以使得老版本浏览器模拟出新特性,从而达到兼容的目的。 - **示例代码**: ```...

    支持html5的浏览器有哪些

    ### 测试HTML5支持的方法 为了更直观地了解浏览器是否支持HTML5,下面列举了几种常用的测试方法: 1. **搜狗浏览器提供的测试页面**([http://ie.sogou.com/lab/html5.html](http://ie.sogou.com/lab/html5.html)...

    HTML5新的WEB标准和浏览器支持[参考].pdf

    总的来说,HTML5和ECMAScript 5的这些新特性提升了Web开发的效率和用户体验,同时浏览器厂商也逐步跟进了对这些标准的支持。开发者在编写代码时应考虑这些新功能,并通过条件检测或库来确保跨浏览器兼容性。

    HTML5特性检测--检测技术

    HTML5引入了许多新的API和技术,但并非所有的浏览器都完整支持这些新特性。为了确保网站或应用能够在各种浏览器中正常运行,进行特性检测变得尤为重要。本文将详细介绍四种用于检测浏览器是否支持特定HTML5特性的...

    检测当前浏览器支持的javascript版本

    例如,检测Chrome浏览器是否支持ES6的新特性: ```javascript const userAgent = navigator.userAgent; if (userAgent.indexOf('Chrome') &gt; -1) { // Check for ES6 support in Chrome if (typeof (() =&gt; {}) ===...

    html5.js文件,在head部分引用该文件,使各种浏览器支持html5

    库的工作原理就是检测浏览器对HTML5新特性的支持程度,并通过JavaScript代码来填充不支持的功能,使得这些旧浏览器也能尽可能接近地模拟HTML5的行为。 例如,对于不支持HTML5音频和视频标签的浏览器,HTML5.js可能...

    浏览器检测脚本

    浏览器检测脚本是一种用于识别用户所使用的Web浏览器类型、版本以及特性的JavaScript代码。在Web开发中,这种脚本能够帮助开发者确保他们的网站或应用程序在不同的浏览器上具有良好的兼容性和性能。由于各浏览器对...

    微信分享(html5兼容所有的移动端浏览器)

    首先,我们要明白HTML5是现代网页开发的标准,它引入了许多新的元素、API和特性,提升了网页的交互性和性能。在构建微信分享功能时,我们主要会利用HTML5的Web存储(如localStorage)、跨文档消息传递(Cross-...

    Modernizr是一个JavaScript库,可以检测用户浏览器中的HTML5和CSS3特性.zip

    这样,即使在不支持新特性的浏览器中,用户也能获得基本的用户体验。 Modernizr支持检测的特性非常广泛,包括但不限于:HTML5元素(如和)、Canvas、SVG、WebGL、Geolocation、Web Workers、Web Storage...

    js判断浏览器是否支持html5

    不过,由于不同浏览器对HTML5的支持程度不一,因此在开发时常常需要检测浏览器对HTML5的支持情况。 要检测浏览器是否支持HTML5,我们通常可以通过JavaScript来进行。下面,我们详细解析了三种常用的方法,并且会...

    Modernizr一个JavaScript库检测用户浏览器HTML5和CSS3功能

    Modernizr是一款强大的JavaScript库,它的主要任务是检测用户的浏览器是否支持HTML5和CSS3的新特性。这个库在Web开发领域中扮演着至关重要的角色,因为它允许开发者根据浏览器的兼容性来调整网页内容,确保网站在...

    处理HTML5新标签的浏览器兼容版问题

    然而,由于HTML5是一门相对较新的技术,一些较旧的浏览器,特别是微软公司的Internet Explorer 8及以下版本,它们并不完全支持HTML5的新标签和特性。这导致了开发者在使用HTML5的新标签时遇到了浏览器兼容性的问题。...

    检测浏览器相关信息

    - Chrome以其快速的V8引擎和频繁的更新著称,同时广泛支持新的Web API。 - Firefox注重隐私和开放源代码,也支持许多现代特性。 - Safari是苹果设备的默认浏览器,与iOS和macOS深度集成,对WebKit引擎有独特的实现。...

    flash+html5浏览器兼容文件上传方案

    "Flash+HTML5浏览器兼容文件上传方案"是针对不同浏览器的兼容性问题提出的一种解决方案,它结合了Adobe Flash技术和HTML5的新特性,以确保在各种浏览器上提供一致的用户体验。 Flash技术在过去的Web开发中扮演了...

    浏览器分级支持 GBS

    B级浏览器可能对一些新特性有部分支持,需要做一定的适配工作;C级浏览器可能较老或者市场份额较小,对于这些浏览器,网站可能只需要确保基本功能可用即可。 在实际开发中,GBS策略要求开发者了解目标用户群体常用...

    自制html5检测页面

    本项目是一个自制的HTML5检测页面,主要用于检查用户的浏览器是否支持HTML5中的关键特性,特别是`canvas`标签。`canvas`是HTML5中的一个强大元素,允许动态渲染图形,包括图像、形状和动画,为网页带来了丰富的交互...

    js、css、html判断浏览器的各种版本

    然而,随着现代浏览器对Web标准的普遍支持,依赖于浏览器检测的策略正在逐渐减少,取而代之的是基于功能检测的编程模式,这种模式更注重于浏览器是否支持特定的功能,而非其具体版本。无论如何,了解这些检测技术...

Global site tag (gtag.js) - Google Analytics