使用纯JavaScript向脚本标记正确添加defer属性

w46czmvw  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(195)

我正在尝试添加一个像这样的延迟脚本标记:

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

但是我发现result脚本标记将生成defer属性,如defer=true,而不仅仅是defer
它们是一样的吗?如果我做defer=true而不是defer,会有什么影响?

cgyqldqp

cgyqldqp1#

我会把它改成:

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

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

也就是说,规范规定布尔属性的值不应该出现,否则应该设置为自身,没有前导/尾随空格(大小写无关紧要)。因此,在动态设置时,最好将值保留为属性的名称。

有关布尔属性(HTML5),请参阅此文档:https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute
引用这个doc:
一些属性是布尔属性。元素上存在布尔属性表示真值,不存在该属性表示假值。
如果存在该属性,则其值必须是空字符串,或者是与该属性的规范名称匹配的ASCII不区分大小写的值,并且没有前导或尾随空格。

**注意:**布尔型属性不允许使用true和false值,表示false值时,必须将属性全部省略。

下面是defer属性的文档(HTML5):https://www.w3.org/TR/html5/scripting-1.html#attr-script-defer
它指出:
async和defer属性是布尔属性,指示脚本应该如何执行。

**更新:**看起来如果你把一个属性设置为空字符串,它会添加一个没有值的属性,这也是一个选项。

zzwlnbp8

zzwlnbp82#

这对我很有效:( chrome 94)
script.defer = true;

yizd12fk

yizd12fk3#

如果你已经有一个脚本标签,并希望添加defer/async属性。然后使用此代码。

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

相关问题