使用纯 JavaScript 正确添加 defer 属性到 script 标签

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");

它们通常表现相同（尽管文档从技术上讲，延迟等属性的值不应该是“true”或“false”） - 或者至少在我使用过布尔属性的任何浏览器中。属性

defer

通常会在脚本标记中实现ifpresent时生效。

其值将被忽略。

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

有关布尔属性 (HTML5)，请参阅此文档：

https://www.w3.org/TR/html5/infrastruct.html#boolean-attribute

引用该文档：

许多属性都是布尔属性。元素上布尔属性的存在表示真实值，并且 缺少该属性表示错误值。

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

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

以及 defer 属性 (HTML5) 的文档：

https://www.w3.org/TR/html5/scripting-1.html#attr-script-defer

它指出：

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

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

Answer 2

这对我有用：（chrome 94）

script.defer = true;

Answer 3

如果你已经有一个 script 标签并想添加 defer/async 属性。然后使用此代码。

window.addEventListener('load', (event) => {
    var fbChatScript = document.querySelector('#facebook-jssdk');
    fbChatScript.setAttribute('defer', '');
});

Answer 4

动态插入的脚本会忽略 defer 属性。它们将“始终”被异步加载。您可以在

此处阅读更多相关信息。