Question

为了理解modernizr，我运行了以下代码。

<!DOCTYPE html><html><head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript">
</script>

<script>
var yes = "yes";
var no = "no";
</script>

<script>
if (Modernizr.audio) {
document.getElementById("demo").innerHTML = yes;
}

else{
document.getElementById("demo").innerHTML = no;
}
</script>

</head><body>

<p id="demo"></p>

</body></html>

如果我运行此代码的浏览器确实支持音频（它确实如此），它应该显示＆＃34;是＆＃34;但它只显示空白页面。这是我第一次使用modernizr，所以请耐心等待。我做错了什么？

Answer 1

运行内联脚本时，#demo元素尚未加载，因此不存在。将脚本移动到元素下面。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<script>
  var yes = "yes";
  var no = "no";
</script>

<p id="demo"></p>

<script>
  if (Modernizr.audio) {
    document.getElementById("demo").innerHTML = yes;
  } else {
    document.getElementById("demo").innerHTML = no;
  }
</script>

＆＃13;

Answer 2

问题是因为您尝试设置innerHTML元素的p，但DOM load之前。

您需要将脚本包装在DOMContentLoaded

的事件侦听器中

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript">
</script>

<script>
var yes = "yes";
var no = "no";
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  if (Modernizr.audio) {
  document.getElementById("demo").innerHTML = yes;
  }

  else{
  document.getElementById("demo").innerHTML = no;
  }
});
</script>

<p id="demo"></p>

＆＃13;

DOMContentLoaded确保DOM（文档对象模型）已完全加载，以便您可以查询DOM中的元素。

或者，正如帕特里克所说，将script移到body

的末尾

仅供参考：此问题是由您Javascript而不是Modernizer

的实施引起的

涉及modernizr的JS代码不按照它的方式工作？

2 个答案: