通过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>

我只想对此脚本标记进行延迟或异步,如下所示:

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

那么我该如何使用javascript做到这一点？

Answer 1

无需添加async到您的script标记,因为默认情况下启用该属性,并且脚本将异步加载,除非被告知不要.

至于defer,就像src在JavaScript中更改属性一样,您也可以像这样启用它:

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