Как дождаться загрузки DOM, прежде чем добавлять теги сценария в <head>?

Question

Как дождаться загрузки DOM, прежде чем добавлять теги сценария в <head>?

0

Я реализую эту тему Developr из темыforest в приложение Meteor.

В настоящее время я выполняю это, помещая соответствующие javascripts в /public и добавляя их с помощью jQuery:

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

Если требуемые сценарии помещаются в /client/js/, кажется, что они либо запускаются слишком рано, либо до того, как DOM будет загружаться. Если они размещены непосредственно в заголовке основного файла html, они, похоже, будут работать одинаково.

Я что-то пропустил здесь - есть ли более элегантный способ загрузки скриптов после загрузки DOM?

dsp_099 06 окт. 2013, в 08:28

Источник

0

Почему бы не использовать jQuery $.getScript() api.jquery.com/jQuery.getScript
Daniel 06 окт. 2013, в 06:10
0

Вам не нужно добавлять их в заголовок, если вы ожидаете загрузки DOM.
zyglobe 06 окт. 2013, в 06:15

Теги:

javascript

jquery

dom

meteor

3 ответа

0

Я думаю, у вас может быть другая проблема. Похоже, что сторонний код завернут в закрытие и работает некорректно. Попробуйте поместить их в папку client/compatibility. Это предотвратит его закрытие в закрытии, которое может решить проблемы сторонних разработчиков. Убедитесь, что порядок загрузки внутри здесь правильный, он загружает файлы в алфавитном порядке внутри папки. (порядок загрузки)

Если это не сработает, узнайте, где выполняется код и закомментируйте вызов. Затем загрузите html внутри шаблона, даже если это всего лишь шаблон страницы со всем html. Создайте js файл для шаблона и вызовите методы в обработанном шаблоном обратном вызове.

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

Обратите внимание, что для вызова stuff2 и т.д. Вам, скорее всего, понадобится сценарий в папке совместимости, чтобы вы могли достигнуть пространств имен из template_stuff.js.

SkinnyGeek1010 06 окт. 2013, в 14:29

0

Использовать jQuery getScript()

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

Daniel 06 окт. 2013, в 03:37

Ещё вопросы

Почему бы не использовать jQuery $.getScript() api.jquery.com/jQuery.getScript
Вам не нужно добавлять их в заголовок, если вы ожидаете загрузки DOM.

alanning · Accepted Answer · 2013-10-06T20-48-00.000Z

Существует несколько способов ожидания загрузки 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>