javascript - 哪个更适合我简单但有效的 javascript 嵌入代码(为什么？)

Question

对于你们大多数人来说，这可能是一个简单的问题，也许我对这篇文章的样式设置太多，但我只是希望它有助于获得一个好的答案(对于我的第一个问题)。

背景

我想创建一个简单的横幅/视觉效果，以便多所小学可以显示它们属于一个更大的非营利组织(例如“雨伞品牌”)。

由于大多数学校都有自己的网站和网站管理员，CMS-es等。我想给出一行简单的JS供网站管理员在模板/html中实现。就像 f.i. Google Analytics(分析)标签或服务(例如 Intercom)。

要求

1. 易于实现(复制/粘贴)
2. 异步，因此不会干扰页面速度等。
3. 无 iFrame

我的解决方案

我编写了一个简单的工作 JavaScript (createBanner.js)，它使用 CSS/HTML 创建一个 DIV 并将托管在外部网站上:

var logo = document.createElement("div");
logo.innerHTML =
    '<span style="height: 100px;width: 100px; background: red; position: fixed; right: 10px;top: 10px;z-index: 99999;"></span>\n' 
document.body.appendChild(logo);

我会要求学校实现嵌入脚本并有 2 个版本。

嵌入脚本版本 1:

<script>
var script = document.createElement('script');
script.src = "//externaldomain.com/createBanner.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>

嵌入脚本版本 2:

<script async src="//externaldomain.com/createBanner.js"></script>

我的问题:

1. 这两个嵌入脚本中哪一个最适合我使用？或者还有更好的方法吗？

2. 这些方法将来也可以用于更复杂的 JavaScript 吗？

感谢您的帮助。

最诚挚的问候，丹尼斯

Answer 1

取决于您的用例，但如果您的脚本在 DOM 或其他脚本中没有依赖项，则只需选择第二个。如果是，请选择第一个。

但是由于需求本身声明它应该是异步的，所以它是第二个