检查浏览器是否支持HTML 5功能（附检查代码）

最新推荐文章于 2021-08-22 22:10:11 发布

zanos

最新推荐文章于 2021-08-22 22:10:11 发布

阅读量2.5k

点赞数 1

分类专栏： HTML 5 - Up and running 文章标签：浏览器 html function input video h.264

本文链接：https://blog.csdn.net/zanos/article/details/7093786

版权

HTML 5 - Up and running 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

老的浏览器是不支持HTML 5的功能的，部分新的浏览器目前可以支持部分HTML 5特性。有4种检测是否支持HTML 5的方法：
1. 检查目标属性是否被支持在某个全局对象中（如window或navigator）
2. 创建一个元素，检测目标属性是否存在于该元素中
3. 创建一个元素，检测是否支持该元素的某种方法，再检测方法的返回是否正确。
4. 创建一个元素，为该元素的某属性赋值，再检测该属性是否保留了该值。

部分元素的说明：
1. Canvas
Canvas是页面中一个矩形区域，分辨率相关，用来在线地渲染图形图象。检测是否支持Canvas，可以在创建canvas之后检查是否支持getContext属性。

2. Canvas text
Canvas text是Canvas的一个发展而来的元素。如果已经支持Canvas，却不一定支持Canvas text。也可以在创建canvas之后检查是否可以使用fillText属性。

3. Video
Video是HTML 5中用来播放视频的元素。也可以在创建video元素之后，检测是否支持canPlayType属性

4. Video Format
视频有很多种格式，浏览器只可以接受某些种特定格式的视频编码方式的播放功能。检测方法可以用canPlayType中指定相应编码方式查看返回。

5. 本地存储
HTML 5可以保存一些信息到本地，并在页面加载完成后可以从本地读取相应数据。如果当前浏览器支持本地存储的话，就会在全局对象window上存在一个localStorage的属性，可以通过检测它来判断浏览器是否支持本地存储功能。默认情况下本地可以直接读取和修改某网站保存的数据，但一个网站的页面尝试访问另一个网站页网存储的数据将会失败。

6. web worker
Web woker是一种可以让javascript在后台执行的机制，可以执行多个线程并发执行，用来处理数据运算，网络加载等操作，而与此同时页面可以继续浏览。

7. 离线web应用
当页面离线时，HTML 5提供了离线web应用的机制可以使web应用在离线的状态下得到执行。这样就可以把浏览器当做一个平台来用。当第一次访问一个可离线访问的应用时，它会通知浏览器下载所有相关资源，下载完成后，就可以在任何情况下开启该应用程序。在下次上线时，应用可以将你的操作和改动同步上传到网站上。

8. 地理位置
通过浏览器你可以获取你的地理位置（通过IP地址，GPS设备，手机连接信息等等）。通过检测navigator中是否支持geolocation属性就可以知道你的页面是否支持地理位置特性。

9. 更多的input类型
HTML 4中，input只支持text和password两种输入类型。HTML 5中支持更多种的类型，可以通过创建一个input元素，并给它赋值，看它是否能维持被设定的值来查看是否支持该属性。

10. PlaceHolder文本
在文本输入框中，可以加入占位用的文字进行输入框需要数据的说明，这个在手机应用中很常见了，HTML 4中也有很多模拟这个效果的应用。

11. 表单的自动焦点
如在google主页中的输入框form自动焦点功能，在HTML 4中也是大量模拟了这个效果。可以检测input中是否存在autofocus属性来判断是否支持。

12. Microdata
Microdata直译为微视频，实则更多为页面的语义元数据。比如某张图是不是在CC许可等等，这是个自定义比较多的属性，可以用它来个性化很多内容。

以上就是所有可以检查的HTML 5特性，也是HTML 5现有支持的所有特性。可见HTML 5的确在朝着平台化，应用化的方向发展。下面是一个检查浏览器是否支持上面功能（除了input部分，内容比较多，也比较琐碎，需要的话，补下就好）。通过检测，我的Chrome除去microdata不支持，其他的都支持，而IE-8就完全不支持（这也很合理）。CSDN不支持附件，只能通过贴代码来分享了。

通过金山快盘下载：下载HTML 5检测页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML 5特性支持检测</title>
</head>

<body>
<p>
<script language="Javascript">

function checkCanvasAvailable()
{
	return !!document.createElement('canvas').getContext;
}

function checkCanvasTextAvailable()
{
	if(!checkCanvasAvailable())
		return false;
	var dummy_canvas = document.createElement('canvas');
	var context = dummy_canvas.getContext('2d');
	return typeof context.fillText == 'function';
}

function checkVideoAvailable()
{
	return !!document.createElement('video').canPlayType;
}

function checkH264BaselineSupport()
{
	if(!checkVideoAvailable())
		return false;
	var v = document.createElement('video');
	return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

function checkLocalStorageAvailable()
{
	return ('localStorage' in window) && window['localStorage']!=null;
}

function checkWebWorkerAvailable()
{
	return !!window.Worker;
}

function checkOfflineAvailable()
{
	return !!window.applicationCache;
}

function checkGeoLocation()
{
	return !!navigator.geolocation;
}

function checkPlaceHolderSupport()
{
	var i = document.createElement('input');
	return 'placeholder' in i;
}

function checkAutofocusSupport()
{
	var i = document.createElement('input');
	return 'autofocus' in i;
}

function checkMicrodataSupport()
{
	return !!document.getItems;
}

if(checkCanvasTextAvailable())
	document.write("当前浏览器支持Canvas");
else
	document.write("当前浏览器不支持Canvas");

document.write("<br>");

if(checkCanvasTextAvailable())
	document.write("当前浏览器支持Canvas Text");
else
	document.write("当前浏览器不支持Canvas Text");

document.write("<br>");

if(checkVideoAvailable())
	document.write("当前浏览器支持Video");
else
	document.write("当前浏览器不支持Video");

document.write("<br>");

if(checkH264BaselineSupport()!='')
	document.write("当前浏览器支持H.264 baseline编码");
else
	document.write("当前浏览器不支持H.264 baseline编码");

document.write("<br>");

if(checkLocalStorageAvailable())
	document.write("当前浏览器支持本地存储");
else
	document.write("当前浏览器不支持本地存储");

document.write("<br>");

if(checkWebWorkerAvailable())
	document.write("当前浏览器支持web worker");
else
	document.write("当前浏览器不支持web worker");

document.write("<br>");

if(checkOfflineAvailable())
	document.write("当前浏览器支持web离线应用");
else
	document.write("当前浏览器不支持web离线应用");

document.write("<br>");

if(checkGeoLocation())
	document.write("当前浏览器支持地理位置信息");
else 
	document.write("当前浏览器不支持地理位置信息");

document.write("<br>");

if(checkPlaceHolderSupport())
	document.write("当前浏览器支持PlaceHolder文本");
else 
	document.write("当前浏览器不支持PlaceHolder文本");
	
document.write("<br>");

if(checkAutofocusSupport())
	document.write("当前浏览器支持自动焦点");
else 
	document.write("当前浏览器不支持自动焦点");
	
document.write("<br>");

if(checkMicrodataSupport())
	document.write("当前浏览器支持Microdata");
else 
	document.write("当前浏览器不支持Microdata");

</script>
<br>
By zanosy@126.com
</p>

</body>

zanos

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
检查浏览器是否支持HTML 5功能（附检查代码）

老的浏览器是不支持HTML 5的功能的，部分新的浏览器目前可以支持部分HTML 5特性。有4种检测是否支持HTML 5的方法：1. 检查目标属性是否被支持在某个全局对象中（如window或navigator）2. 创建一个元素，检测目标属性是否存在于该元素中3. 创建一个元素，检测是否支持该元素的某种方法，再检测方法的返回是否正确。4. 创建一个元素，为该元素的某属性赋值，再检测该
复制链接

扫一扫