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

2017-01-13 10:51:34来源:csdn作者:zanos人点击


老的浏览器是不支持HTML 5的功能的,部分新的浏览器目前可以支持部分HTML 5特性。有4种检测是否支持HTML 5的方法:1. 检查目标属性是否被支持在某个全局对象中(如window或navigator)2. 创建一个元素,检测目标属性是否存在于该元素中3. 创建一个元素,检测是否支持该元素的某种方法,再检测方法的返回是否正确。4. 创建一个元素,为该元素的某属性赋值,再检测该属性是否保留了该值。部分元素的说明:1. CanvasCanvas是页面中一个矩形区域,分辨率相关,用来在线地渲染图形图象。检测是否支持Canvas,可以在创建canvas之后检查是否支持getContext属性。2. Canvas textCanvas text是Canvas的一个发展而来的元素。如果已经支持Canvas,却不一定支持Canvas text。也可以在创建canvas之后检查是否可以使用fillText属性。3. VideoVideo是HTML 5中用来播放视频的元素。也可以在创建video元素之后,检测是否支持canPlayType属性4. Video Format视频有很多种格式,浏览器只可以接受某些种特定格式的视频编码方式的播放功能。检测方法可以用canPlayType中指定相应编码方式查看返回。5. 本地存储HTML 5可以保存一些信息到本地,并在页面加载完成后可以从本地读取相应数据。如果当前浏览器支持本地存储的话,就会在全局对象window上存在一个localStorage的属性,可以通过检测它来判断浏览器是否支持本地存储功能。默认情况下本地可以直接读取和修改某网站保存的数据,但一个网站的页面尝试访问另一个网站页网存储的数据将会失败。6. web workerWeb 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. MicrodataMicrodata直译为微视频,实则更多为页面的语义元数据。比如某张图是不是在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>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台