logo标签列表

有没有一种方法可以一次性执行所有Modernizr测试？

javascriptcross-browsercompatibilitymodernizr
7
我刚接触 Modernizr，想要简单地检查浏览器的兼容性。我已经生成了一个 Modernizr 脚本来测试我的 Web 应用程序中最基本的组件，这个应用程序高度依赖于 HTML5、CSS3 和现代 JavaScript 方法。有没有一种同时运行所有这些测试的方法？在查看文档时，我发现有很多逐个测试每个功能的方法，但是我没有找到一种同时进行所有测试的方法。我希望能够像这样做：

伪代码

if (Modernizr.testAll()) {
  // Load site
} else {
  // Redirect to compatibility page
}
7个回答
8

事实证明，所有的测试都直接存储为布尔值在Modernizr对象中。因此，如果你正在构建一个有很多特性依赖关系的应用程序，并且想要一次性测试它们所有，可以使用以下代码：

var supported = true;
for (var feature in Modernizr) {
  if (typeof Modernizr[feature] === "boolean" && Modernizr[feature] == false) {
    supported = false;
    break;
  }
}
1
我最近想到一个 Modernizr.__all__ 或者类似的东西可能会很有用，特别是在新的 Modernizr.on() API 中：Modernizr.on('__all__', function() { /* 所有异步测试都已经完成 */ });... 你觉得怎么样，@David？ - Stu Cox
@StuCox：我认为那将非常棒——在我的情况下肯定会很有用。 - David Jones
这对我不起作用：它只循环遍历了所有测试的一小部分。 - Ciro Santilli OurBigBook.com
我一年前发布了这个...现在的Modernizr对象可能已经改变了。我建议你看看它，看看能否修改我的代码使其工作。 - David Jones
0

我也在寻找同样的东西，然后我想出了下面的代码：

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!

0

一种更简洁的方法，适用于我和所有人，只需一行代码

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

1
如果你能尽可能详细地解释你的答案，那就更好了。 - Ali Kanat
0

如果您想在浏览器中显示所有特性检测，请使用此代码：

<!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
            );
            console.log(feature, Modernizr[feature]);
        }
        }
    );
</script>
</body>
</html>

0

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

<!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>
0

我个人在这方面遇到了很多困难。但最终在一天结束时找到了答案。您可以使用我的代码，它将显示完整的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>
0
使用现代的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) 将测试以查看是否有任何数组项失败（即测试未通过）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接