Javascript 如何等待DOM加载后再将脚本标记添加到<；头>；？

我正在将这一功能从最早的应用程序实现到Meteor应用程序中

我目前正在通过将有问题的javascripts放到

/public

并使用jQuery将它们追加来实现这一点：

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

Meteor.startup（函数（）{ $（'head'）。追加（''）； //…全部7个脚本左右 }); 如果所需的脚本放在

/client/js/

中，则它们可能运行得太早，或者在DOM加载完成之前运行。如果它们直接放在主html文件的头中，它们似乎也会以同样的方式出现错误

我在这里遗漏了什么吗？在加载DOM之后，有没有更优雅的方法来加载脚本？

使用jQuery getScript（）

---

我想你可能有不同的问题。听起来好像第三方代码被包装在一个闭包中，无法正常工作。尝试将它们放在

客户机/兼容性

文件夹中。这将防止它被封装在闭包中，从而解决第三方问题。确保此处的加载顺序正确，它会按文件夹中的字母顺序加载文件。（）

如果这不起作用，请找出代码的执行位置并注释掉调用。然后将html加载到模板中，即使它只是一个包含所有html的“页面”模板。为模板创建一个

js

文件，并调用模板呈现回调中的方法

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

---

请注意，要调用

stuff2

等。。您可能需要将其脚本放在兼容性文件夹中，以便可以从

模板\u stuff.js

访问名称空间。有几种方法可以等待DOM加载后再注入脚本：

• Meteor.startup（如您所示）
• jQuery的文档就绪：

  $（函数（）{…}）

• 布局模板底部的脚本标记

关于优雅，我使用了一个车把助手，因为它允许我在一个地方整合所有的“后车身”代码。然后根据需要使用jQuery的文档ready

比如说,

// 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>

//在client/handlebar.js中
车把.注册表帮助器（'后体'），功能（名称，选项）{
函数isMobileSafari（）{
返回navigator.userAgent.match（/（iPod | iPhone | iPad）/）&&
navigator.userAgent.match（/AppleWebKit/）
}
if（isMobileSafari（））{
$（函数（）{
FastClick.attach（document.body）
})
}
////根据需要加载脚本。。。
//$（函数（）{
//$.getScript，正如Daniel所建议的
//$（'body'）。根据需要追加
//纯js:document.createElement（'script'）
// })
})
//在client/main.html中（使用迷你页面路由器）
{{{yield}}}
{{afterBody}}
{{>头}
{{{yield}}}
{{afterBody}}

为什么不使用jQuery

$.getScript（）

如果您正在等待DOM加载，则无需将它们添加到头部。

// 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>