javascript - 使用纯 javascript 正确地将 defer 属性添加到脚本标记

Question

所以我尝试像这样添加一个延迟脚本标签

const script = document.createElement('script');
  script.setAttribute('src', '/script.js');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('defer', true);//this is the code in question!
  document.getElementsByTagName('body')[0].appendChild(script);

但我发现结果脚本标记将生成 defer 属性，如 defer=true 而不仅仅是 defer。

它们一样吗？如果我使用 defer=true 而不是 defer，这意味着什么？

谢谢!

Answer 1

我会把它改成:

script.setAttribute("defer", "defer");

它们通常表现相同(尽管文档在技术上声明诸如 defer 之类的属性的值不应该是“true”或 false)——或者至少在我使用过 bool 属性的任何浏览器中都是如此。属性 defer 通常实现为在脚本标记中存在 时生效。它的值将被忽略。

话虽这么说，规范规定 bool 属性的值不应存在，否则应设置为其自身，并且没有前导/尾随空格(大小写无关紧要)。因此，最好在动态设置时将值保留为属性的名称。

请参阅此文档以了解 bool 属性 (HTML5):https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

引用该文档:

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

还有这个 defer 属性的文档(HTML5): https://www.w3.org/TR/html5/scripting-1.html#attr-script-defer

它指出:

The async and defer attributes are boolean attributes that indicate how > the script should be executed.

更新: 看起来如果您将属性设置为空字符串，它会添加没有值的属性。这也是一种选择。