怎样可以检测浏览器是否支持HTML5中的某一元素?-问答-阿里云开发者社区-阿里云

开发者社区> kun坤> 正文

怎样可以检测浏览器是否支持HTML5中的某一元素?

2020-05-25 20:37:36 222 1

"我想检测各个浏览器是否支持HTML5中的一些元素,不知道怎样检测,要检测的内容就是

http://www.w3.org/TR/html5-diff/#new-elements 上的部分内容,3.1. New Elements那一栏里的,就是不知道如何下手,例如想测是否支持<section>?请求大家帮帮我~"

取消 提交回答
全部回答(1)
  • kun坤
    2020-05-26 11:12:23

    "这个只能通过最新的HTML5的标准还有各浏览器的支持情况 网上有一个HTML5标准是否支持某一个元素或功能的网站 找找 我之前看过######

    用Javascript可以检测,思路是这样的:

    在页面创建某个标记(语法正确时总能创建,即使不能被解释),然后检测这个标记的HTML5特有属性特征(不能与HTML4重叠的,否则无法判断了),如果检测到就算有。

    比如说创建一个canvas,再检测这个canvas标签是否具有getContext()方法(或属性),因为这个方法不是你手动添加的,而是当浏览器核心具有这种解释能力的时候内部执行构造函数时就具有的,所以就能检测到了。

    这里只是一个思路,掌握越多的特征,做的越细致越能检测精确。

     

    当然,还有一个更简单的方法,直接检测浏览器的userAgent,针对已知的浏览器解释能力列表也可以快速检测……人品爆发的时候,比如说遇到IE6了,基本就不用检测了

     

    这里附上一段 http://www.one-lab.net/index.htm的检测canvas的示范代码

        function try_canvas() {
            var canvas = document.createElement("canvas");
            var div = document.getElementById("canvas_div");
            if (canvas) {
                if (canvas.getContext) {
                    var context = canvas.getContext("2d");
                    if (context) {
                        context.globalCompositeOperation = "copy";
                        canvas.setAttribute("title", "ONE Browser Demo UI");
                        canvas.setAttribute("id", "canvas_body");
                        canvas.setAttribute("width", 700);
                        canvas.setAttribute("height", 500);
                        canvas.oncontextmenu = new Function("event.returnValue = false;");
                        div.appendChild(canvas);
                        setInterval("canvas_animate()", imgAnimationDelay);
                        document.getElementById("canvas_div_inner").style.display = "none";
                    }
                }
                else {
                    document.getElementById("canvas_div_inner").style.display = "block";
                }
            }
        }
        

    ######参考这里吧: http://www.w3cschool.cn/html5_reference.html
    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56725浏览量 回答数 19

1

回答

支付宝H5 下载的时候,提示 【请确保该下载文件来源安全,如需浏览,请长按网址复制后使用浏览器访问】

游客ptexzird3doe2 2019-10-14 15:29:54 62355浏览量 回答数 1

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92873浏览量 回答数 28

66

回答

第一期阿里云高校工作坊申办启动

柚子菌 2017-08-10 17:04:08 43726浏览量 回答数 66

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 46935浏览量 回答数 19

1

回答

H5 直播的疯狂点赞动画是如何实现的?(附完整源码)

剑曼红尘 2020-04-15 19:03:48 35174浏览量 回答数 1

58

回答

技术入门问答集锦,涉及多种技术方向,解决新人学习困惑

管理贝贝 2016-08-03 10:13:27 52467浏览量 回答数 58

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80121浏览量 回答数 13

61

回答

阿里云OSS需求汇总帖,有需求请进来说说

enj0y 2012-09-05 08:40:29 41454浏览量 回答数 61

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47061浏览量 回答数 46
+关注
0
文章
13401
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载