html5 template content (document fragment) load order on appendChild

Question

consider the following code -->

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

now on appending this to the DOM

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

gives this output in console -->

   00000000
   11111111
   22222222
   Uncaught ReferenceError: $ is not defined

So the question in general is -->

How to properly load into DOM, an html <template> that has an external script (like jQuery in this case), followed by an inline script having some dependency on it.

Also - this does not happen if template tag is removed -->

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

How in the latter case, does the browser download it synchronously?

Is it possible to have blocking script download (line by line) in the former case (with template) ?

your script tag above is not correct; does it work if you use a real external script? — dandavis, Dec 30 '15 at 21:51

CoderPi · Answer 1 · 2015-12-30T21:59:44.010

0

The problem is that the script is loaded async. That means that it start to load the script from the web, but continues running the code below. So in that case it will execute code below without having loaded jQuery yet.

You only need to load it once, so you could do it at the start, and only once:

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>

Another option would be to make sure code below is only executed once the file is loaded:

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>

edited Dec 30 '15 at 21:59

answered Dec 30 '15 at 21:54

CoderPi

12,985
4
34
62

@dandavis what do you mean? – CoderPi Dec 30 '15 at 22:11
http://stackoverflow.com/questions/4845762/onload-handler-for-script-tag-in-internet-explorer – dandavis Dec 30 '15 at 22:14
why does it not happen if the template tag is removed (content loaded directly)? how to achieve blocking script download? – apratimankur Dec 30 '15 at 23:10
@apratimankur it's not about the template tag, the script is not loaded when the code below is executed as I stated in my answer. My second code will work without the template as well, as I explained. – CoderPi Dec 30 '15 at 23:18
@dandavis yes, but how does it load synchronously in the 2nd case that I have mentioned? – apratimankur Dec 30 '15 at 23:21
@apratimankur it will only do so if your script is in the `` otherwise use my second solution! – CoderPi Dec 30 '15 at 23:22

score 0 · Answer 2 · edited Aug 21 '18 at 14:12

Here's how I handle it in my application (with 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);

html5 template content (document fragment) load order on appendChild

2 Answers2