检测浏览器是否支持HTML5功能【转】

最新推荐文章于 2026-03-13 04:00:08 发布

转载最新推荐文章于 2026-03-13 04:00:08 发布 · 370 阅读

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在HTML5开发中检测浏览器是否支持特定功能的方法，包括在全局对象上检测属性、在创建的元素上检测属性、检测方法是否返回期望结果及检测元素是否能保留特定行为。详细阐述了离线功能、canvas元素、WebM和H.264视频编解码器以及input的range类型的检测方法。

检测浏览器是否支持HTML5功能【转】

在用HTML5开发Web App时，检测浏览器是否支持HTML5功能是个必须的步骤。

检测浏览器是否支持HTML5功能，可归结为以下四种方式：

在全局对象上检测属性；
在创建的元素上检测属性；
检测一个方法是否返回期望值；
检测元素是否能保留值。

1. 在全局对象上检测属性

比如，检测离线功能的代码：

<!doctype
 html>

<html lang="cn">

<head>

<meta charset="UTF-8">

<title>applicationCache
 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>

2. 在创建的元素上检测属性

首先要创建一个元素，再检测其能否为DOM识别。比如，通过测试canvas元素的context属性，检测浏览器是否支持canvas元素：

<!doctype
 html>

<html lang="cn">

<head>

<meta charset="UTF-8">

<title>Simple
 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>

3. 检测一个方法是否返回期望值

我们知道，浏览器对WebM、H.264的支持是不尽相同的。如何检测浏览器支持哪种编解码器？首先要像前面“2. 在创建的元素上检测属性”所述那样，先检测是否支持该元素（比如video），再检测方法是否返回期望值：

<!doctype
 html>

<html lang="cn">

<head>

<meta charset="UTF-8">

<title>Video
 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>

4. 检测元素是否能保留值

HTML5表单元素的检测只能用这种方法，比如input的range类型，如果浏览器不支持，则会显示一个普通的文本框，具体检测方法如下所示：

<!doctype
 html>

<html lang="cn">

<head>

<meta charset="UTF-8">

<title>Range
 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 <code><input type=range></code>
 input type.");

</script>

</head>

<body>

</body>

</html>