Javascript 有条件地包括不带document.write的JS文件

我希望将async属性添加到包含javascript的文件中，但前提是useragent匹配特定字符串

我无法在服务器端执行此操作，因为页面可能缓存在服务器端，因此我需要使用javascript检测useragent并相应地将其异步

目前我是这样做的：

<script id="myscript" type="text/javascript">
if(navigator.userAgent.match(/development/i)){
    document.write("<script type='text\/javascript' src='\/\/localhost\/static\/js\/header.min.js' async><\/script>\n");
} else { 
    document.write("<script type='text\/javascript' src='\/\/localhost\/static\/js\/header.min.js'><\/script>\n");
}
</script>

我不太擅长javascript，所以如果有人有更好的想法。。。谢谢。

您可以在设置或不设置异步后尝试设置src属性：

<script id="myscript" src=""></script>

<script type="text/javascript">
   var myScript = document.getElementById("myscript");

   if(navigator.userAgent.match(/development/i)){
       myScript.setAttribute("async", "async");
   }
   myScript.setAttribute("src", "/static/js/header.min.js");
</script>

---

之后添加async属性确实是无用的，因为脚本是同步加载的，然后您到达了告诉它异步加载的那一行：我很确定您在这里的唯一其他选项是使用document.createElement'script'，然后给它一个src属性，然后将其附加到文档中。这看起来可以工作。我将尝试，但当我以这种方式设置src属性时，它仍然是渲染阻塞吗？我的意思是，如果在这段代码之后，我有一个依赖于外部文件中定义的其他变量的内联脚本呢？这就是异步加载脚本的问题所在。你永远不知道它是什么时候加载的，所以如果另一个脚本依赖它，它很可能会崩溃。我接受这个，因为它正在为我现在需要的工作。非常感谢你。

var scriptEle = document.createElement("script");
scriptEle.setAttribute("type","text/javascript");
scriptEle.setAttribute("src","//localhost/static/js/header.min.js");
if(navigator.userAgent.match(/development/i)){
scriptEle.setAttribute("async","async");
}
document.getElementsByTagName("head")[0].appendElement(scriptEle);

<script id="myscript" src=""></script>

<script type="text/javascript">
   var myScript = document.getElementById("myscript");

   if(navigator.userAgent.match(/development/i)){
       myScript.setAttribute("async", "async");
   }
   myScript.setAttribute("src", "/static/js/header.min.js");
</script>