檢測瀏覽器是否支援HTML5功能

2gua發表於2013-07-14
瀏覽器HTML

在用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>

enter image description here

相關文章