javascript - 如何将脚本 block 的执行延迟到加载外部脚本之后？

Question

我正在尝试动态插入和执行几个脚本，我认为我遇到了竞争条件，即第二个脚本在第一个脚本加载之前尝试执行。

我正在处理的项目有一个不寻常的要求:我无法修改页面的 HTML 源代码。它被编译到一个应用程序中用于本地化目的。

因此，我无法插入 <script>像我通常会在 JavaScript 文件中链接的标签。

原来客户想要使用托管的网络字体，所以我决定构建并附加两个必需的 <script>在已链接的 JavaScript 文件中动态标记。

<script> block 在 head 中正确附加的文档，但第二个 block 中的函数似乎在第一个中链接的外部脚本之前触发 <script>标签已完全加载，并抛出 undefined错误。

这是相关的代码:

document.getElementsByTagName("head")[0];
var tag = document.createElement('script');
tag.setAttribute("src", "http://use.typekit.com/izj3fep.js");
document.getElementsByTagName("head")[0].appendChild(tag);

try {
        Typekit.load(); // This is executing too quickly!

    } catch(e){
        console.log("Hosted fonts failed to load: " + e);
}

我尝试移动 try block 到 window.onload事件，但在调用任何此代码之前触发。

我想我可以动态加载 jQuery 然后使用它的 ready事件，但这似乎相当严厉。我犹豫要不要在这个项目中引入库，因为客户端有很多自定义 JavaScript，可能会与之发生冲突。

我还能尝试什么？

Answer 1

您需要挂接到脚本元素的 onload 事件并在那里执行您的代码:

document.getElementsByTagName("head")[0];
var tag = document.createElement('script');

tag.onload = onTagLoaded;

tag.setAttribute("src", "http://use.typekit.com/izj3fep.js");
document.getElementsByTagName("head")[0].appendChild(tag);

function onTagLoaded() {
    try {
        Typekit.load(); // This is executing too quickly!
    } catch(e){
         console.log("Hosted fonts failed to load: " + e);
    }
}