• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5特性检测-检测技术

HTML5特性检测-检测技术

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,特性检测,检测技术等相关知识,匿名希望在学习及工作中可以帮助到您
4种基本技术可以用于检测浏览器是否支持某种html5特性,从简单到复杂的顺序:

1、检测全局对象(window或navigator)是否拥有特定的属性。
如果浏览器支持地理位置API的话,全局的navigator对象上会有一个名为geolocation的属性,反之,navigator对象上该属性的值为undefined:

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

如果不想写这个方法的话,可以使用modernizr库提供的方法检测浏览器是否支持地理位置API:

if(Modernizr.geolocation){ do something}  
else{ do something }

2、创建一个元素,然后检测该元素的DOM对象是否拥有特定的属性。以检测画布特性为例。

function supports_canvas(){  
return !!document.createElement_x_x('canvas').getContext;  
}

return !!document.createElement_x_x('canvas').getContext;这一句是创建一个虚拟的

<canvas>元素,这个元素永远不会附加到页面上,因此对于用户来说它永远是不可见的。紧接着测试该元素是否拥有getContext()方法,这个方法只有当浏览器支持canvasAPI时才会存在,最后用双重否定!!来强制这个检测方法返回一个布尔值

如果不想写这个方法的话,可以使用modernizr库提供的方法检测浏览器是否支持canvas API:

if(Modernizr.canvas){ do something}
else{ do something }

3、创建一个元素,然后检测该元素的DOM对象是否拥有特定的方法,同时调用这个方法并检查它的返回值。以检测支持视频格式为例。

function supports_video(){
   return !!document.createElement_x_x('video').canPlayType;
}

如果浏览器支持HTML5 video,被创建<video>元素对应的DOM对象会有一个名为canPlayType()的方法,反之,该对象只会拥有一些所有元素都有的公共属性。

如果不想写这个方法的话,可以使用modernizr库提供的方法检测浏览器是否支持video API:

if(Modernizr.video){ do something}
else{ do something }

4、创建一个元素,给这个元素的DOM对象设定特定的属性值,然后检查浏览器是否保留了该属性值。以检测支持的<input>类型为例。

首先创建一个虚拟的<input>元素:var i=document.createElement_x_x("input");

<input>元素默认为文本类型,接下来将元素的类型设置成要检测的类型: i.setAttribute("type","color");

如果浏览器支持次特定的输入框类型,那么设置的type值会被保留,反之,依然为文本类型。

return i.type!=="text";
if(!Modernizr.inputtypes.date){
   //浏览器有没有提供,type="date">原生支持
}

以上就是HTML5特性检测-检测技术的内容,更多相关内容请关注微课江湖()!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2017-10-01h5改良的input元素种类
  • 2017-08-06HTML5 离线应用之打造零请求、无流量网站的解决方法
  • 2018-12-03HTML5中的<aside>元素与<article>元素 实例详解
  • 2018-12-03HTML5 canvas画布详解(一)
  • 2017-08-06使用HTML5 Canvas绘制直线或折线等线条的方法讲解
  • 2018-12-03HTML5实现眼睛移动效果的示例
  • 2018-12-03HTML5新增的结构元素
  • 2018-12-03[html5游戏开发]经典的推箱子
  • 2018-12-03html5:canvas
  • 2017-08-06使用HTML5 Canvas API绘制弧线的教程

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5 web本地存储将取代我们的cookie_html5教程技巧
    • HTML5 Canvas 起步(3)-颜色与渐变
    • HTML5单页面手势滑屏切换如何实现
    • 如何使用canvas的得到验证码的效果(附源码)
    • HTML5 Canvas中绘制矩形实例教程
    • HTML5每日一练之details展开收缩标签的应用
    • Html5中Canvas画线有毛边如何解决
    • HTML 5-块级元素
    • 小强的HTML5移动开发之路(52)——jquerymobile中的触控交互
    • HTML5的文本样式实例介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有