如何才能延迟脚本块的执行，直到外部脚本加载完成为止？

我试图动态插入和执行一些脚本，我想我正在碰到一个竞争条件，第二个尝试在第一个被加载之前执行。如何才能延迟脚本块的执行，直到外部脚本加载完成为止？

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

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

事实证明，客户希望使用托管的网页字体，因此我决定在已链接的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可能会与此项目发生冲突，因此我不愿意在此项目中添加一个库。

我还能试试吗？

来源

2012-01-05 Josh Earl

您需要连接到脚本元素的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); 
    } 
}

来源

2012-01-05 03:38:27

小心，虽然，这是古怪的... http://unixpapa.com/js/dyna.html（ie的旧版本似乎使用onreadystatechange替代） – benesch 2012-01-05 03:40:16

这是在Chrome中工作。我似乎无法让'tag.onreadystatechanged'在IE7或IE8中触发。有什么建议吗？我好亲近 – 2012-01-05 13:17:24

您可以使用yepnope（http://yepnopejs.com/）加载它。我知道这是一个图书馆，但它非常轻（如果你的客户已经在使用modernizr，那么免费）。这非常值得。希望客户端没有另外的yepnope函数，并且您不必担心冲突。

来源

2012-01-05 03:37:27 amccausl

是否使用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); 
    } 
});

来源

2012-01-05 03:39:25 benesch

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

来源

2012-01-05 03:41:32

如何才能延迟脚本块的执行，直到外部脚本加载完成为止？

回答

相关问题