HTML5特性检測

HTML5特性检測:

1.检測全局对象:诸如window或navigator是否拥有特定的属性

2.创建元素:检測该元素的DOM对象是否拥有特定的属性

3.创建元素:检測该元素的DOM对象是否拥有特定的方法

4.创建元素:赋予该元素的DOM对象设定的属性值,检測浏览器

是否保留该属性值

Modernizr:HTML5特性检測库,用于检測浏览器是否支持HTML5

和CSS3特性.下载Development版http://www.modernizr.com/

eg.

Ⅰ.检測浏览器是否支持canvas API

1. html5特性检測2:

<html>

<head>

<title>Dive into HTML5</title></head>

<body>

<script>

function supports_canvas() {

return !!document.createElement(‘canvas‘).getContext;}

alert(supports_canvas());

</script></body></html>

2.使用modernizr库提供的方法检測

<html><head><meta charset="utf-8">

<title>Dive into HTML5</title>

<script src="modernizr.custom.57110.js" ></script>

</head><body><script>

if (Modernizr.canvas) {

alert("OK"); }   // let‘s draw some shapes!

else {

alert("no");}     // no native canvas support available

</script></body></html>

Ⅱ.检測浏览器是否支持HTML5 viedo

1.使用HTML5特性检測2

function supports_video(){

return !!document.CreateElement(“video”).canPlayType;}

2.使用modernizr库提供的方法检測

if(modernizr.video){

let‘s play some video!}

else{

// no native video support available

// maybe check for QuickTime or Flash instead }

Ⅲ.检測浏览器是否支持某种视频格式

一.检測MPEG-4容器里的h.264编码格式的视频和AACLC格式的音频(mac和Iphone支持)

1.使用HTML5检測特性3

function supports_h264_baseline_video(){

if(!supports_video()){return false;}

var v=document.createElement(“video”);

return v.canPlayType(‘video/mp4;codecs=”avc1.42E01E,mp4a.40.2”’);}

canPlayType()方法返回一个字符串:

“probably”表示浏览器有充分把握能够播放此格式

“maybe”表示浏览器可能播放此格式

“”(空字符串)表示浏览器无法播放此格式

二.检測Ogg容器内Theora编码格式的视频和Vorbis编码格式的音频(Mozilla Firefox等开源浏览器支持)

1.使用HTML5检測特性3

function supports_ogg_theora_video(){

if(!supports_video()){return false;}

var v=document.createElement(“video”);

return v.canPlayType(‘video/ogg;codecs=”theora,vorbis”’);}

三.检測 Matroska容器内webM视频编码格式和Vorbis编码格式的音频

1.使用HTML5检測特性3

function supports_webm_video() {

if (!supports_video()) { return false; }

var v = document.createElement("video");

return v.canPlayType(‘video/webm; codecs="vp8, vorbis"‘);

使用modernizr库提供的方法检測浏览器是否支持各种HTML5格式

if (Modernizr.video) {

// let‘s play some video! but what kind?

if (Modernizr.video.ogg) {

// try Ogg Theora + Vorbis in an Ogg container

} else if (Modernizr.video.h264){// try H.264 video + AAC audio in an MP4 container

}}

Ⅳ.检測浏览器是否支持本地存储。

1.检測方法1

function supports_local_storage() {

return (‘localStorage‘ in window) && window[‘localStorage‘] !== null;

}

2.使用modernizr库

if (Modernizr.localstorage) {

// window.localStorage is available!}

else {

// no native support for local storage :(

// maybe try Gears or another third-party solution

}

Ⅴ.检測浏览器是否支持Web Workers。

1.检測方法1

function supports_web_workers() {

return !!window.Worker;

}

2.使用modernizr库

if (Modernizr.webworkers) {

// window.Worker is available!

} else {

// no native support for web workers :(

// maybe try Gears or another third-party solution

}

Ⅵ.检測浏览器是否支持离线web应用(Offline Web Applications)

1.检測方法1

function supports_offline() {

return !!window.applicationCache;

}

2.使用modernizr库

if (Modernizr.applicationcache) {

// window.applicationCache is available!

} else {

// no native support for offline :(

// maybe try Gears or another third-party solution

}

Ⅶ.检測浏览器是否支持地理位置应用

1.检測方法1

function supports_geolocation() {

return !!navigator.geolocation;

}

2.使用modernizr库

if (Modernizr.geolocation) {

// let‘s find out where you are!

} else {

// no native geolocation support available :(

// maybe try Gears or another third-party solution

}

Ⅷ。检測浏览器是否支持输入框类型

1.检測方法4

function supports_inputtypes{

var i = document.createElement("input");

i.setAttribute("type", "color");

return i.type !== "text";

}

2.使用modernizr库

if (!Modernizr.inputtypes.date) {

// no native support for <input type="date"> :(

// maybe build one yourself with

// Dojo

// or jQueryUI

}

Ⅸ.检測浏览器是否支持站位文本(Placeholder Text)

1.检測方法2

function supports_input_placeholder() {

var i = document.createElement(‘input‘);

return ‘placeholder‘ in i;

}

2.使用modernizr库

if (Modernizr.input.placeholder) {

// your placeholder text should already be visible!

} else {

// no placeholder support :(

// fall back to a scripted solution

}

Ⅹ。检測浏览器是否支持自己主动聚焦

1.检測方法2

function supports_input_autofocus() {

var i = document.createElement(‘input‘);

return ‘autofocus‘ in i;

}

2.使用modernizr库

if (Modernizr.input.autofocus) {

// autofocus works!

} else {

// no autofocus support :(

// fall back to a scripted solution

}

Ⅺ。检測浏览器是否支持HTML5微数据API

1.检測方法1

function supports_microdata_api() {

return !!document.getItems;

}

时间: 2024-09-30 10:24:32

HTML5特性检測的相关文章

C++内存泄露检測原理

转自:http://hi.baidu.com/jasonlyy/item/9ca0cecf2c8f113a99b4981c 本文针对 linux 下的 C++ 程序的内存泄漏的检測方法及事实上现进行探讨.当中包含 C++ 中的 new 和 delete 的基本原理,内 存检測子系统的实现原理和详细方法,以及内存泄漏检測的高级话题.作为内存检測子系统实现的一部分,提供了一个具有更好的使用特性的相互排斥体 (Mutex)类. 1.开发背景 在 windows 下使用 VC 编程时,我们通常须要 DE

检測磁盘驱动的健康程度SMART

在server中,全部组件中一般最easy坏掉的就是磁盘.所以一般採取RAID来保证系统的稳定性,通过冗余磁盘的方式防止磁盘故障. 现代硬件驱动器一般支持SMART(自我监測分析和报告技术),它可以监视整个硬盘驱动器的健康状况.而且当硬盘驱动器即将故障的时候会发出警告. 一般硬件厂商提供的磁盘工具,是在系统重新启动后检查磁盘驱动的健康状况,而SMART能够不用重新启动系统就能够检查硬盘驱动器的健康程度. 在linux中,工具包的名字为smartmontools 在centos中能够使用 yum

OpenCV图像处理篇之边缘检測算子

3种边缘检測算子 灰度或结构等信息的突变位置是图像的边缘,图像的边缘有幅度和方向属性.沿边缘方向像素变化缓慢,垂直边缘方向像素变化剧烈.因此,边缘上的变化能通过梯度计算出来. 一阶导数的梯度算子 对于二维的图像.梯度定义为一个向量. Gx对于x方向的梯度,Gy相应y方向的梯度,向量的幅值本来是 mag(f)?=?(Gx2?+?Gy2)1/2,为简化计算,一般用mag(f)=|Gx|+|Gy|近似,幅值同一时候包括了x而后y方向的梯度信息.梯度的方向为 α?=?arctan(Gx/Gy) . 因为

LeakCanary:简单粗暴的内存泄漏检測工具

差点儿每一个程序猿在开发的过程中都会遇到内存泄漏.那么我们怎样检測到app是否哪里出现内存泄漏呢?square公司推出了一款简单粗暴的检測内存泄漏的工具-- LeakCanary 什么是内存泄漏? 内存泄漏是指因为疏忽或者错误造成程序未能释放已经不再使用的内存,内存泄漏不是指内存在物理上的消失,而是应用程序分配某段内存后,因为设计错误失去了对于这段内存的控制.因而造成内存的浪费. 内存泄漏和内存溢出是两码事,不要混淆,内存溢出通俗的讲就是内存不够用,如今的仅仅能手机内存越来越大,内存溢出的情况不

ASP怎样检測某目录是否存在,不存在则自己主动创建

ASP怎样检測某目录是否存在,不存在则自己主动创建 folder=server.mappath("/imagess") Set fso = CreateObject("Scripting.FileSystemObject") if fso.fileexists(Server.mappath(filepath)) then respnse.write("都有了还建什么建") else fso.createfolder(folder) end if

模式识别 - 有害视频检測程序的策略

有害视频检測程序的策略 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26346831 有害(色情\恐怖\暴力)视频, 严重危害网络的健康, 须要进行检測和过滤. 检測色情\恐怖视频, 通过检測程序, 检測出多个场景的概率, 然后进行排序, 当场景多余6个时, 仅仅取最大的6个场景; 返回的概率值是前3个最大检測值场景的概率的均值; 色情\恐怖汇总时, 首先检測色情, 假设为色情视频, 则不进行恐怖的检測, 否则继续检測恐怖,

图像边缘检測小结

边缘是图像中灰度发生急剧变化的区域边界. 图像灰度的变化情况能够用图像灰度分布的梯度来表示,数字图像中求导是利用差分近似微分来进行的,实际上经常使用空域微分算子通过卷积来完毕. 一阶导数算子 1)  Roberts算子 Roberts算子是一种斜向偏差分的梯度计算方法.梯度的大小代表边缘的强度.梯度的方向与边缘的走向垂直.Roberts操作实际上是求旋转 \pm" title="\pm" >45度两个方向上微分值的和. Roberts算子定位精度高,在水平和垂直方向的效

opencv实现gamma灰阶检測

简单介绍 本篇解说使用opencv来測试,表示camera gamma參数的灰阶卡图片指标:YA Block.DynamicRange.Gray Scale. 详细实现 实现代码 #include <math.h> #include <string.h> #include <stdio.h> #include <stdlib.h> #include <opencv2/core/core.hpp> #include <opencv2/high

网络接口的检測

假设没有下面命令,能够先去加入一个http://repoforge.org/use/ 的yum源. ifstat命令 ifstat能够监控网络接口.比較简单地查看网络流量 ifstat默认是不监控回环接口的流量的流量的单位是KB/s 使用ifstat -a能够监控全部的接口 -l    监測环路网络接口(lo). 缺省情况下.ifstat监測活动的全部非环路网络接口.经使用发现,加上-l參数能监測全部的网络接口的信息.       而不是仅仅监測 lo的接口信息,也就是说,加上-l參数比不加-l