使用纯 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 什么？

谢谢！

原文由 Ezeewei 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会把它改成：

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

它们通常表现相同（尽管文档在技术上声明诸如 defer 之类的属性的值不应为“真”或“假”）——或者至少在我使用过布尔属性的任何浏览器中。属性 defer 如果出现 在脚本标签中，通常会被执行以生效。它的值将被忽略。

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

有关布尔属性 (HTML5)，请参阅此文档： https ://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

引用该文档：

许多属性是布尔属性。元素上存在布尔属性表示真值，不存在该属性表示假值。

如果该属性存在，其值必须是空字符串或者是不区分大小写的 ASCII 匹配属性规范名称的值，没有前导或尾随空格。

注意： 布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。

以及 defer 属性 (HTML5) 的文档： https ://www.w3.org/TR/html5/scripting-1.html#attr-script-defer

它指出：

async 和 defer 属性是指示脚本应该如何执行的布尔属性。

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

原文由 Anish Goyal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用：（chrome 94）

script.defer = true;

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议