Question

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

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

因此，我无法插入<script>标记，就像我通常在JavaScript文件中链接一样。

事实证明客户端想要使用托管的Web字体，因此我决定在已经链接的JavaScript文件中动态构建和附加两个必需的<script>标记。

<script>块正确附加在文档的head中，但第二个块中的函数似乎在第一个<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块移动到window.onload事件，但在调用任何代码之前会触发。

我想我可以动态加载jQuery，然后使用它的ready事件，但这看起来非常严厉。我对在这个项目中加入一个库犹豫不决，因为客户端有很多可能与之冲突的自定义JavaScript。

我还能尝试什么？

Answer 1

您可以使用yepnope（http://yepnopejs.com/）加载它。我知道它是一个库，但它很轻（如果你的客户已经在使用modernizr，则免费）。这非常值得。希望客户端没有其他的yepnope功能，你不必担心冲突。

Answer 2

您需要挂钩脚本元素的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);
    }
}

Answer 3

您使用的是jQuery吗？如果没有，我强烈推荐它。它会让你的生活变得如此简单：

$.getScript('http://use.typekit.com/izj3fep.js', function(data, textStatus){
   try {
        Typekit.load(); //executes properly now!
    } catch(e) {
        console.log("Hosted fonts failed to load: " + e);
    }
});

Answer 4

将脚本组合成一个大似乎是最简单的解决方案。

如何在加载外部脚本之前延迟执行脚本块？

4 个答案: