Порядок загрузки содержимого шаблона html5 (фрагмент документа) в appendChild

рассмотрим следующий код -->

<template id="foo">
    <script type="text/javascript">
        console.log("00000000");
    </script>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">
        console.log(11111111);
    </script>
    <script type="text/javascript">
        console.log(22222222);
        var xyz = $;
        console.log(33333333);
    </script>
</template>

теперь при добавлении этого в DOM

var template = document.getElementById('foo')
var clone = document.importNode(template.content,true);
document.appendChild(clone);

дает этот вывод в консоли -->

   00000000
   11111111
   22222222
   Uncaught ReferenceError: $ is not defined

Так что вопрос в общем -->

Как правильно загрузить в DOM HTML-код, <template> который имеет внешний скрипт (например, jQuery в данном случае), за которым следует встроенный скрипт, имеющий некоторую зависимость от него.

Также - этого не происходит, если тег шаблона удален -->

   <script type="text/javascript">
        console.log("00000000");
    </script>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">
        console.log(11111111);
    </script>
    <script type="text/javascript">
        console.log(22222222);
        var xyz = $;
        console.log(33333333);
    </script>

Как в последнем случае браузер его скачивает синхронно?

Возможна ли блокировка загрузки скрипта (построчно) в первом случае (с шаблоном)?


javascript html dom html5-template
person apratimankur    schedule 30.12.2015    source источник
comment
ваш тег скрипта выше неверен; это работает, если вы используете реальный внешний скрипт?   -  person dandavis    schedule 31.12.2015
comment
@dandavis исправил это.   -  person apratimankur    schedule 31.12.2015

Ответы (2)


arrow_upward
0
arrow_downward

Проблема в том, что скрипт загружается асинхронно. Это означает, что он начинает загружать скрипт из Интернета, но продолжает выполнять приведенный ниже код. Таким образом, в этом случае он выполнит приведенный ниже код, еще не загрузив jQuery.

Вам нужно загрузить его только один раз, чтобы вы могли сделать это в начале, и только один раз:

var template = document.getElementById('foo')
var clone = document.importNode(template.content,true);
document.body.appendChild(clone);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<template id="foo">
  <script type="text/javascript">
    console.log(00000000);
  </script>

  <script type="text/javascript">
    console.log(11111111);
  </script>
  <script type="text/javascript">
    console.log(22222222);
    var xyz = $;
    console.log(33333333);
  </script>
</template>

Другой вариант — убедиться, что приведенный ниже код выполняется только после загрузки файла:

var template = document.getElementById('foo')
var clone = document.importNode(template.content, true);
document.body.appendChild(clone);
<template id="foo">
  <script type="text/javascript">
    console.log(00000000);
  </script>

  <script type="text/javascript">
    function scriptOnload() {
      console.log(11111111);
      console.log(22222222);
      var xyz = $;
      console.log(33333333);
    }
  </script>

  <script onload="scriptOnload()" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</template>

person CoderPi    schedule 30.12.2015
comment
@dandavis, что ты имеешь в виду? - person CoderPi; 31.12.2015
comment
stackoverflow.com/ вопросы/4845762/ - person dandavis; 31.12.2015
comment
почему этого не происходит, если тег шаблона удален (контент загружается напрямую)? как добиться блокировки загрузки скрипта? - person apratimankur; 31.12.2015
comment
@apratimankur речь идет не о теге шаблона, скрипт не загружается, когда выполняется приведенный ниже код, как я указал в своем ответе. Мой второй код будет работать и без шаблона, как я объяснил. - person CoderPi; 31.12.2015
comment
@dandavis да, но как он загружается синхронно во втором случае, о котором я упоминал? - person apratimankur; 31.12.2015
comment
@apratimankur это произойдет только в том случае, если ваш скрипт находится в <head>, в противном случае используйте мое второе решение! - person CoderPi; 31.12.2015

arrow_upward
0
arrow_downward

Вот как я обрабатываю это в своем приложении (с помощью jQuery):

//Load the template from an external file and append it to the HEAD of the document
$.get("/path/to/your_external_template_file.html", function (html_string) {
    $('head', top.document).append(
        new DOMParser().parseFromString(html_string, 'text/html').querySelector('template')
    );
}, 'html');

//Locate the template after you've imported it
var $template = $("#top_template_element_id");

//If you want to reuse the content, be sure to clone the node.
var content = $template.prop('content').cloneNode(true);

//Add a copy of the template to desired container on the page
var $container = $('#target_container_id').append(content);
person Codenova    schedule 21.08.2018