我是 Modernizr 的新手，我只是在寻找一种简单的方法来检查浏览器的整体兼容性。我生成了一个 Modernizr 脚本，仅测试我的 Web 应用程序中最重要的组件，这些组件高度依赖于 HTML5、CSS3 和现代 JavaScript 方法。有没有办法同时运行所有这些测试？查看文档，我看到了很多方法来逐个测试每个功能，但我没有看到一种方法可以一次完成所有操作。我希望做这样的事情：
伪代码
if (Modernizr.testAll()) {
// Load site
} else {
// Redirect to compatibility page
}
【问题讨论】：
标签： javascript cross-browser compatibility modernizr
事实证明，所有测试都作为布尔值直接存储在 Modernizr 对象中，因此，如果您正在构建一个具有大量特性依赖项的应用程序并且想要一次测试它们，请使用以下命令：
var supported = true;
for (var feature in Modernizr) {
if (typeof Modernizr[feature] === "boolean" && Modernizr[feature] == false) {
supported = false;
break;
}
}
【讨论】：
Modernizr.__all__ 或其他东西可能很有用——尤其是使用新的Modernizr.on() API：Modernizr.on('__all__', function () { /* all async tests have run */ });...@David 你怎么看？
我一直在寻找同样的东西，我想出了以下代码：
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！
【讨论】：
一种更简洁的方式，对我有用，而且都在一行中
Object.values(Modernizr).indexOf(false) === -1
【讨论】：
我个人为此苦苦挣扎。但最终在一天结束时找到了答案。您可以在下面使用我的代码，它将显示 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>
【讨论】：
使用现代 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) 将测试是否有任何数组项为假（即测试失败）。
【讨论】：
如果您想在浏览器中显示所有功能检测，请使用此代码：
<!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>【讨论】：
如果您想在浏览器中显示所有功能检测，请使用此代码：
<!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>
【讨论】：