Chinaunix首页 | 论坛 | 博客

zanos的ChinaUnix博客zanos.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

zanos

  • 博客访问： 33041
  • 博文数量： 8
  • 博客积分： 171
  • 博客等级： 入伍新兵
  • 技术积分： 105
  • 用 户 组： 普通用户
  • 注册时间： 2011-12-26 00:21
文章分类

全部博文（8）

文章存档

2012年（1）

2011年（7）

我的朋友
最近访客
推荐博文
相关博文
检查浏览器是否支持HTML 5功能（附检查代码）

分类： 系统运维

2011-12-26 00:25:03

老的浏览器是不支持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不支持附件，只能通过贴代码来分享了。

通过金山快盘下载：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>HTML 5特性支持检测</title>
  6. </head>

  8. <body>
  9. <p>
  10. <script language="Javascript">

  12. function checkCanvasAvailable()
  13. {
  14.     return !!document.createElement('canvas').getContext;
  15. }

  17. function checkCanvasTextAvailable()
  18. {
  19.     if(!checkCanvasAvailable())
  20.         return false;
  21.     var dummy_canvas = document.createElement('canvas');
  22.     var context = dummy_canvas.getContext('2d');
  23.     return typeof context.fillText == 'function';
  24. }

  26. function checkVideoAvailable()
  27. {
  28.     return !!document.createElement('video').canPlayType;
  29. }

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

  39. function checkLocalStorageAvailable()
  40. {
  41.     return ('localStorage' in window) && window['localStorage']!=null;
  42. }

  44. function checkWebWorkerAvailable()
  45. {
  46.     return !!window.Worker;
  47. }

  49. function checkOfflineAvailable()
  50. {
  51.     return !!window.applicationCache;
  52. }

  54. function checkGeoLocation()
  55. {
  56.     return !!navigator.geolocation;
  57. }

  59. function checkPlaceHolderSupport()
  60. {
  61.     var i = document.createElement('input');
  62.     return 'placeholder' in i;
  63. }

  65. function checkAutofocusSupport()
  66. {
  67.     var i = document.createElement('input');
  68.     return 'autofocus' in i;
  69. }

  71. function checkMicrodataSupport()
  72. {
  73.     return !!document.getItems;
  74. }

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

  81. document.write("
    "    );

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

  88. document.write("
    "    );

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

  95. document.write("
    "    );

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

  102. document.write("
    "    );

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

  109. document.write("
    "    );

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

  116. document.write("
    "    );

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

  123. document.write("
    "    );

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

  130. document.write("
    "    );

  132. if(checkPlaceHolderSupport())
  133.     document.write("当前浏览器支持PlaceHolder文本");
  134. else
  135.     document.write("当前浏览器不支持PlaceHolder文本");
  136.     
  137. document.write("
    "    );

  139. if(checkAutofocusSupport())
  140.     document.write("当前浏览器支持自动焦点");
  141. else
  142.     document.write("当前浏览器不支持自动焦点");
  143.     
  144. document.write("
    "    );

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

  151. </script>
  152. <br>
  153. By zanosy@126.com
  154. </p>

  156. </body>

阅读(854) | 评论(0) | 转发(0) |
0

上一篇：HTML 5由来

下一篇：HTML 4与HTML 5的一些区别

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6