如何等待DOM加载之前，将脚本标记添加到<head>？

我正在从themeforest实现这个Developr theme到Meteor应用程序。如何等待DOM加载之前，将脚本标记添加到<head>？

我目前通过把有问题的JavaScript的以/public并使用它们附加jQuery的完成这样的：

Meteor.startup(function() { 
    $('head').append('<script src="/template_stuff.js"></script>'); 
    // .. all 7 scripts or so 
});

如果需要的脚本放置在/client/js/，看来，他们要么运行太早或之前DOM完成加载。如果将它们直接放置在主html文件的标题中，它们似乎以同样的方式出错。

我在这里丢失了一些东西 - 是否有一个更优雅的方式来使DOM加载后加载脚本？

来源

2013-10-06 dsp_099

为什么不使用jQuery'$ .getScript（）'http://api.jquery.com/jQuery.getScript/ – Daniel

你并不需要将它们添加到头部如果你正在等待DOM加载。 – RedGlobe

有等待，直到DOM加载注入脚本几种方法：

Meteor.startup（如你所示）
jQuery的文件准备：$(function() { ... })
脚本标签在底部你的布局模板

关于优雅，我使用了一个把手帮手，因为它允许我在一个地方合并所有'身体后的代码。然后根据需要使用jQuery的文档。

例如，

// in client/handlebars.js 

Handlebars.registerHelper('afterBody', function(name, options) { 

    function isMobileSafari() { 
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && 
      navigator.userAgent.match(/AppleWebKit/) 
    } 

    if (isMobileSafari()) { 
    $(function() { 
     FastClick.attach(document.body) 
    }) 
    } 

    //// load scripts however you want... 
    // $(function() { 
    // $.getScript as Daniel suggests 
    // $('body').append as you have 
    // pure js: document.createElement('script') 
    // }) 

}) 


// in client/main.html (using mini-pages router) 

<template name="layout_no_header"> 
    {{{yield}}} 

    {{afterBody}} 
</template> 

<template name="layout"> 
    {{> header}} 

    {{{yield}}} 

    {{afterBody}} 
</template>

来源

2013-10-06 22:27:22 alanning

使用jQuery getScript加入（）

(function ($) { 
    $.getScript("/template_stuff.js"); 
})(jQuery);

来源

2013-10-06 06:12:42 Daniel

我想你可能有一个不同的问题。这听起来像是第三方代码被封装在闭包中，并且无法正常工作。尝试将它们放入client/compatibility文件夹中。这将防止它被包裹在关闭中，这可以解决第三方问题。确保这里面的加载顺序是正确的，它在文件夹内按字母顺序加载文件。（load order）

如果这样不起作用，请找出正在执行代码的位置并注释掉该呼叫。然后在模板中加载你的html，即使它只是一个包含所有html的'页面'模板。为模板创建一个js文件，并调用模板呈现回调中的方法。

// Execute this function when myPage template is rendered 
Template.myPage.rendered = function() { 
    stuff.init(); 
    stuff2.run(); 
};

注意，在调用stuff2，等等。你可能需要把它的剧本在兼容性文件夹，这样你就可以从template_stuff.js达到的命名空间。

来源

2013-10-06 16:59:16 SkinnyGeek1010

如何等待DOM加载之前，将脚本标记添加到<head>？

回答

相关问题