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

最新推荐文章于 2021-08-22 22:10:11 发布
最新推荐文章于 2021-08-22 22:10:11 发布
阅读量295 收藏
点赞数
分类专栏： html5

检测浏览器是否支持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 >
jillidan
关注
专栏目录
如何检测浏览器是否支持HTML5
ruoyiqing的专栏
09-04 2462
检测是否支持HTML5的几种常用方法总结
检测浏览器是否支持HTML5功能
anchui0906的博客
07-15 187
欢迎访问叶落无声的小站 检测浏览器是否支持HTML5功能 在用HTML5开发Web App时，检测浏览器是否支持HTML5功能是个必须的步骤。 检测浏览器是否支持HTML5功能，可归结为以下四种方式： 在全局对象上检测属性； 在创建的元素上检测属性； 检测一个方法是否返回期望值； 检测元素是否能保留值。 1. 在全局对象上检测属性 比如，检测离线功能的代码...
检测浏览器的支持性html5,检测浏览器是否支持HTML5
weixin_42508290的博客
06-09 211
下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。检测浏览器是否支持html5.myCanvas{width:200px;height:200px;border:1px solid #000;}该浏览器不支持HTML5的画布标记以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之...
检测浏览器是否支持HTML5
sworddancing is the best one
07-25 1959
今天看到一本有关html的书，书名叫《html实战》 我粗略看了一下内容相当不错，一会我会在博客底不分享这本书的网盘： 现在先来看看怎么检测浏览器是否支持HTML5？ 其中就用到画布（canvas）的功能，书上的源代码是这样的：  前几行那是什么意思我看不太懂，执行的结果是这样的：  可以看到浏览器上已经新建了一块画布，说明我的浏览器支持html5， 然后我将那些看不懂得地方删...
如何检测浏览器是否支持HTML5？
Demon's blog
08-22 1867
HTML5新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search <script.标记或指向CSS的样式表链接中不再需要type属性。现在javascript和CSS是默认类型。 可以利用HTML5的新特性，去检测浏览器是否支持这些特效即可验证浏览器是否
使用js检测浏览器是否支持html5中的video标签的方法
10-26
本文将详细讲解如何使用JavaScript来检测浏览器是否支持HTML5中的`<video>`标签，并且进一步判断浏览器是否能够播放MP4格式的视频，这是目前最广泛支持的视频编码格式之一。 首先，我们可以创建一个名为`checkVideo...
js判断浏览器是否支持html5
10-25
要检测浏览器是否支持HTML5，我们通常可以通过JavaScript来进行。下面，我们详细解析了三种常用的方法，并且会针对每一种方法给出示例代码以及详细说明。 方法一：检测Web Workers的支持 Web Workers是HTML5中新增...
检测浏览器是否支持html5视频的代码
09-28
在本文中，我们将探讨如何通过编写一段JavaScript代码来检测一个浏览器是否支持HTML5视频。这是一个对于前端开发者和设计者来说非常重要的技能，因为它能够帮助确保在不同的浏览器中能够正常播放视频内容。 首先，...
HTML5视频支持检测(检查浏览器是否支持视频播放)
09-28
这个方法用于检测浏览器是否能够播放指定的视频或音频类型。它接受一个字符串参数，该字符串定义了媒体的MIME类型和可能的编解码器信息。返回值有三种可能："probably" 表示浏览器很可能支持该类型，"maybe" 表示...
判断浏览器是否支持html5
dawuafang
06-01 214
判断浏览器是否支持html5 &lt;!-- 判断浏览器是否支持html5-方法1.start --&gt; &lt;script&gt; function checkhHtml5() { if (typeof(Worker) !== "undefined") { alert("支持HTML5"); } else { alert...
HTML5之启动篇-检测浏览器是否支持HTML5与第一个H5程序
小树哥儿
03-27 1622
通过编写javaScript了解浏览器是否支持HTML5
如何查看html是不是5,如何检查浏览器是否支持HTML5？
weixin_36225637的博客
06-25 272
这里是如何W3Schools的做的：function checkVideo(){if(!!document.createElement('video').canPlayType){var vidTest=document.createElement("video");oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');...
检查浏览器是否支持HTML 5功能（附检查代码）
学而乐
12-21 2637
老的浏览器是不支持HTML 5的功能的，部分新的浏览器目前可以支持部分HTML 5特性。有4种检测是否支持HTML 5的方法： 1. 检查目标属性是否被支持在某个全局对象中（如window或navigator） 2. 创建一个元素，检测目标属性是否存在于该元素中 3. 创建一个元素，检测是否支持该元素的某种方法，再检测方法的返回是否正确。 4. 创建一个元素，为该元素的某属性赋值，再检测该
项目问题（检测浏览器是否支持html5）
qq_42464346的博客
09-20 490
当判断条件不支持时候动态生成一张背景图来实现（可以解决只显示一张图片，其它内容不会显示） 在main.js里面操作 if (! window.applicationCache ) { document.write(`&lt;img src="./static/img/tishi.jpg" style="position:absolute;top:0;width:100%;height:100%;"...
HTML5 学习记录之浏览器检测是否支持HTML5
半瓶醋码农
06-27 331
HTML 5出来好几年了，但是由于g
怎么去检测浏览器支不支持html5和css3？
yeana1的博客
07-04 5880
HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。
检测浏览器的支持性html5,HTML5 检测浏览器是否支持 Web Workers
weixin_39727005的博客
06-09 492
在使用Web Workers AP函数之前，要确认浏览器是否支持Web Workers。如果不支持，可以提供一些备用信息，提醒用户使用最新的浏览器。下面通过一个实例来讲解如何检查用户的浏览器是否支持Web Workers o【例题】检测浏览器是否支持Web Workers打开sublime,新建一个HTML文档。到“代码”视圍中输入下面的代码，接着到浏览器中运行, 代码示例如下：Documentw...
如何检测您的浏览器是否支持HTML5视频
xmt1139057136的专栏
11-26 9799
如何检测您的浏览器是否支持HTML5视频，看下面代码： function checkVideo() { if(!!document.createElement('video').canPlayType){ var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs
使用Modernizr检测HTML5和CSS3浏览器支持
Modernizr并不直接提供缺失的HTML5或CSS3功能，而是通过添加特定的类到`<html>`元素来告知开发者哪些特性被浏览器支持。例如，如果浏览器不支持CSS3的多重列布局，Modernizr会在`<html>`元素上添加一个类名，如`no-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值