使用纯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") - 或者至少在任何浏览器中我都使用了布尔属性.该属性defer通常实现为如果脚本标记中存在则生效.它的值被忽略.

话虽这么说,规范指定布尔属性的值不应该存在,否则应该设置为自己,没有前导/尾随空格(情况无关紧要).因此,在动态设置时,最好将值保留为属性的名称.

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

从那个doc引用:

许多属性是布尔属性.元素上存在布尔属性表示真值,缺少属性表示false值.

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

注意:布尔属性不允许使用值"true"和"false".要表示错误值,必须完全省略该属性.

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

它指出:

async和defer属性是布尔属性,指示如何执行脚本.

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