检测浏览器是否支持HTML5功能
在用HTML5开发Web App时,检测浏览器是否支持HTML5功能是个必须的步骤。
检测浏览器是否支持HTML5功能,可归结为以下四种方式:
- 在全局对象上检测属性;
- 在创建的元素上检测属性;
- 检测一个方法是否返回期望值;
- 检测元素是否能保留值。
1. 在全局对象上检测属性
比如,检测离线功能的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!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元素:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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),再检测方法是否返回期望值:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!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类型,如果浏览器不支持,则会显示一个普通的文本框,具体检测方法如下所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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 > |