js检查浏览器是否支持html5

  浏览器是否支持HTML5功能,可以使用下面4种方法进行检查。

  1. js检测全局对象上HTML5属性
  2. js在创建的HTML5元素上检测属性
  3. js检测HTML5元素一个方法是否返回期望值
  4. js检测HTML5元素是否能保留值

1,js检测全局对象上HTML5属性:比如,检测离线功能的代码。

<!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,js在创建的HTML5元素上检测属性:首先要创建一个元素,再检测其能否为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,js检测HTML5元素一个方法是否返回期望值:浏览器对WebM、H.264的支持是不尽相同的。如何检测浏览器支持哪种编解码器?首先要像前面“,然后在创建的元素上检测属性”所述那样,先检测是否支持该元素(比如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,js检测HTML5元素是否能保留值: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>

来源:http://www.cnblogs.com/hbzzws/articles/3190521.html

评论(0)网络
阅读(67)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧