javascript - 通过 JavaScript 将 defer 或 async 属性添加到动态生成的脚本标签

Question

我正在动态地将一个脚本标记放入我的页面的 DOM 中，如下所示:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

这应该生成如下内容:

<script src="https://www.youtube.com/iframe_api"></script>

我只想将 defer 或 async 放入此脚本标记中，如下所示:

<script src="https://www.youtube.com/iframe_api" defer async></script>

那么我该如何使用 JavaScript 来做到这一点呢？

Answer 1

没有必要将 async 添加到您的 script 标签中，因为该属性是 enabled by default用于动态脚本。

至于defer，就像你改变JavaScript中的src属性一样，你也可以像这样启用它:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.defer = true;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

或者，您可以使用 setAttribute()为此。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.setAttribute('defer','');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);