Question

我是Modernizr的新手，我只是想找一种简单的方法来检查浏览器的整体兼容性。我已经生成了一个Modernizr脚本来测试我的Web应用程序中最基本的组件，它高度依赖于HTML5，CSS3和现代JavaScript方法。有没有办法同时运行所有这些测试？查看文档，我看到有很多方法可以逐个测试每个功能，但我没有看到一次完成所有功能的方法。我希望能做到这样的事情：

伪代码

if (Modernizr.testAll()) {
  // Load site
} else {
  // Redirect to compatibility page
}

Answer 1

事实证明，所有测试都直接存储在Modernizr对象中，因此如果您构建的应用程序具有很多功能依赖性，并且您希望一次性测试它们，请使用此：

var supported = true;
for (var feature in Modernizr) {
  if (typeof Modernizr[feature] === "boolean" && Modernizr[feature] == false) {
    supported = false;
    break;
  }
}

Answer 2

我正在寻找相同的东西，我想出了以下代码：

for (var feature in Modernizr) 
{
    if (typeof Modernizr[feature] === "boolean")
    {
        console.log("Modernizr_" + feature + ": " +Modernizr[feature]);

        for (var subFeature in Modernizr[feature])
        {
            if (typeof Modernizr[feature][subFeature] === "boolean")
            {
                console.log("Modernizr_" + feature + "_"+ subFeature + ": " + Modernizr[feature]);          
            }
        }
    }


}

HTH！

Answer 3

一种更清洁的方式对我和所有人都有效

Object.values(Modernizr).indexOf(false) === -1

Answer 4

我个人为此付出了很多努力。但是终于在一天结束时找到了答案。您可以在下面使用我的代码，它将显示Modernizr功能及其值的完整列表：

<script type="text/javascript">

    $(document).ready(function () {});
</script>

<script type="text/javascript">
    $(function () {
        function ListAllMOdernizrFeatures() {


            var TotalString = "Modernizr features<br><br>";
            var arrModernizrFeatures = new Array();


            for (var feature in Modernizr) {

                if (typeof Modernizr[feature] === "boolean") {
                    console.log("Modernizr_" + feature + ": " + Modernizr[feature]);
                    arrModernizrFeatures.push("Modernizr." + feature + ": " + Modernizr[feature])

                    for (var subFeature in Modernizr[feature]) {
                        var ModernizrFeature = Modernizr[feature];
                        if (typeof ModernizrFeature[subFeature] === "boolean") {
                            arrModernizrFeatures.push("Modernizr." + feature + subFeature + ": " + ModernizrFeature[subFeature]);
                        }

                    }
                }

            }

            arrModernizrFeatures.sort(); // in lexicographical order

            for (var PropertyIterator = 0; PropertyIterator < arrModernizrFeatures.length; PropertyIterator++) {
                TotalString += PropertyIterator + 1 + ". " + arrModernizrFeatures[PropertyIterator] + "<br>";
            };
            document.getElementById("ListFeatures").innerHTML = TotalString;
        }

        setTimeout(ListAllMOdernizrFeatures, 100);

    });

</script>

Answer 5

使用现代Javascript（ECMAScript 2017），您可以像这样利用Object.values方法：

if (Object.values(Modernizr).indexOf(false) !== -1) {
    console.log('Update your browser (and avoid IE/Edge ?)')
}

Object.values将从Modernizr中提取所有测试结果到一个数组中，然后indexOf(false)将进行测试以查看是否有任何数组项为假（即测试失败）。

Answer 6

如果要在浏览器中显示所有功能检测，请使用此代码：

Net allocation

Answer 7

如果要在浏览器中显示所有功能检测，请使用此代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modernizr Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

</head>
<body>
<h1>Feature Detection</h1>
<div id="feature-detection-result">

</div>
<script>
    var features = Object.keys(Modernizr);
    features = features.sort();

    features.forEach(feature => {
        if (typeof Modernizr[feature] === "boolean") {
            var element = document.createElement('p');
            element.innerHTML = feature + ' ' + Modernizr[feature];
            document.getElementById('feature-detection-result').appendChild(element);
        }
    });
</script>
</body>
</html>

有没有办法一次性执行所有Modernizr测试？

7 个答案: