正文
html5的检测,html检查
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎样检测浏览器是否支持HTML5中的某一元素
指的是结构元素对吧，比如
等标签，最简单的方法是直接写出来，然后查看显示效果，如果浏览器显示效果当中，这些元素被显示成了行元素，那么就是不支持（默认支持的都是块元素）。
另外，有一个网站专门用于检测各类HTML5的东西。(百度“Can
I
use”即可找到这个网站)如图：（有详细的浏览器支持说明，细化到版本号）
相关问答
Q1: html5 检测 是否安装
在全局对象上检测
!doctype html
html lang="zh_CN"
head
meta charset="UTF-8"
meta author="suifengtec"
titleapplicationCache Test/title
script
window.onload = function() {
if (window.applicationCache) {
document.write("Yes, your browser can use offline web applications.");
} else {
document.write("No, your browser cannot use offline web applications.");
}
}
/script
/head
body
/body
/html
在创建的元素上检测
!doctype html
html lang="zh_CN"
head
meta charset="UTF-8"
meta author="suifengtec"
titleSimple Square/title
script type="text/javascript"
window.onload = drawSquare;
function drawSquare () {
var canvas = document.getElementById('Simple.Square');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "rgb(13, 118, 208)";
context.fillRect(2, 2, 98, 98);
} else {
alert("Canvas API requires an HTML5 compliant browser.");
}
}
/script
/head
body
canvas id="Simple.Square" width="100" height="100"/canvas
/body
/html
检测某HTML5方法是否返回期望的值
!doctype html
html lang="zh_CN"
head
meta charset="UTF-8"
meta author="suifengtec"
titleVideo Test/title
script
function videoCheck() {
return !!document.createElement("video").canPlayType;
}
function h264Check() {
if (!videoCheck) {
document.write("not");
return;
}
var video = document.createElement("video");
if (!video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
document.write("not");
}
return;
}
document.write("Your browser does ");
h264Check();
document.write(" support H.264 video.");
/script
/head
body
/body
/html
检测HTML5元素是否能保留值
!doctype html
html lang="zh_CN"
head
meta charset="UTF-8"
meta author="suifengtec"
titleRange Input Test/title
script
function rangeCheck() {
var i = document.createElement("input");
i.setAttribute("type", "range");
if (i.type == "text") {
document.write("not");
}
return;
}
document.write("Your browser does ");
rangeCheck();
document.write(" support the codeinput type=range/code input type.");
/script
/head
body
/body
/html
Q2: 怎么检测浏览器是否支持html5
HTML5是个新生的东西，在浏览器的兼容上还存在一定的局限性，对此我们在使时就遇到了很大问题，那么我们可以通过下面这个简单的方法来检测浏览器是否支持HTML5，从而提示用户更新浏览器或者是使用对html5支持较好的浏览器，代码如下：
!DOCTYPE html
html
head
meta charset="utf-8"
title检测浏览器是否支持html5/title
style type="text/css"
.myCanvas{
width:200px;
height:200px;
border:1px solid #000;
}
/style
/head
body
canvas class="myCanvas"
该浏览器不支持HTML5的画布标记
/canvas
/body
/html
原理：canvas是个画布，支持HTML5的浏览器就会生成一个矩形框，不支持的的话就会出现“该浏览器不支持HTML5的画布标记”这句话
Q3: 网页怎样检测浏览器是否支持html5？
有以下两种方法可以判断浏览器是否支持html5：
方法一：
script
function checkhHtml5() {
if (typeof(Worker) !== "undefined") { alert("支持HTML5"); } else { alert("不支持HTML5"); } }
/script
方法二：
canvas id="Canvas"/canvas
script
if (!document.getElementById("Canvas").getContext){
alert("不支持html5");
}else{
alert("支持html5");
}
/script
Q4: 怎么检测浏览器是否支持HTML5？
利用HTML5新标签对象的方法来进行检测，比如Canvas对象的getContext()、Video对象的canPlayType等。如果浏览器支持HTML5，则返回相应的期望值（返回函数体，布尔值为true），否则无法获得期望值（返回undefined，布尔值为false）。
Canvas对象的getContext
// 方法一
/**
* [supportHtml5 言成科技HTML5学堂]
* @return {[type]} [description]
*/
function supportCanvas() {
return (typeof document.createElement('canvas').getContext === "function");
}
console.log(supportCanvas());
Video对象的canPlayType
// 方法二
/*
* [supportsVideo 言成科技HTML5学堂]
* @return {[type]} [description]
*/
function supportVideo() {
return !!document.createElement('video').canPlayType;
}
console.log(supportVideo());
