ansaurus

Question

Safari and Chrome doesn't evaluate dynamically added <script> tag at page load

Answer 1

+1 A:

At the time when your javascript is evaluated, the DOM isn't fully built, the head element is not even finished. You normally cannot access or manipulate the DOM ( getElementsByTagName and appendChild, etc. ) before the HTML page is fully loaded.

Leventix 2010-02-06 09:23:22

You can access the DOM before the page is loaded, but indeed you can't access elements below the current script block, and it's highly unreliable to do manipulations like inserts inside elements whose close-tag has not yet been encountered.

bobince 2010-02-06 13:24:57

Answer 2

+1 A:

Try this instead:

var s = document.createElement('SCRIPT');
s.charset = 'UTF-8';
s.src ='foo.js';
document.getElementsByTagName('HEAD')[0].appendChild(s);

But place this in a SCRIPT tag at the beginning of the BODY tag

Mic 2010-02-06 11:43:35

Thanks Mic.But Safari and Chrome still showing the same error...

3rensho 2010-02-07 05:29:43

Answer 3

A:

Thanks everyone.

I changed my code as below. I added script.onload event handler.

This is the result for Safari and Chrome.

Page loaded.

Number of script elements is 2

ERROR! (success = false)

Script loaded.

Number of script elements is 2

There are 2 <script> elements at the time of page load, but "success" variable is still false (meaning that the external JS file "foo.js" is not yet evaluated).

So I think I can conclude that if <script> element is added by DOMElement.appendChild, Safari and Chrome append <script> element right after the current code block, but read the external JS file asynchronously.

<html>
  <head>
    <title>JavaScript loading test</title>
    <script type="text/javascript">
      var success = false;
      var logs = [""];

      function showLog(msg)
      {
        logs.push(msg);

        var spanElem = document.getElementById("result");
        if (spanElem)
        {
          spanElem.innerHTML += logs.join("<br/>");
          logs = [""];
        }
      }

      window.onload = function()
      {
        showLog("Page loaded.");
        var scriptElemCount = document.getElementsByTagName("head")[0].getElementsByTagName("script").length;
        showLog("Number of script elements is " + scriptElemCount);
        showLog(success? "OK (success = true)": "ERROR! (success = false)");
      }

      var scriptElem = document.createElement("script");
      scriptElem.setAttribute("type", "text/javascript");
      scriptElem.setAttribute("src", "foo.js");
      scriptElem.onload = function()
      {
        showLog("Script loaded.");
        var scriptElemCount = document.getElementsByTagName("head")[0].getElementsByTagName("script").length;
        showLog("Number of script elements is " + scriptElemCount);
      };

      var headElem = document.getElementsByTagName("head")[0];
      headElem.appendChild(scriptElem);
    </script>
    <!-- expected new scrip tag being inserted here. -->
  </head>
  <body>
    Testing...<br/>
    <span id="result"></span>
  </body>
</html>

3rensho 2010-02-07 05:49:11

The files are loaded sequentially when you hardcode them in the page HEAD. But if you add them dynamically, they are loaded asynchronously. An easy cross browser technique is to add a call to a function at the end of the js file you load. This function will be executed when the file is fully parsed and loaded. Or you can wrap your js code into a function that will be executed as well when the file is loaded. I think you should avoid all those onload handlers.

Mic 2010-02-07 12:09:11

Answer 4

A:

O método document.write não funcionou comigo.

gadarf 2010-03-01 01:35:43

ansaurus

tags:

views:

answers:

Safari and Chrome doesn't evaluate dynamically added <script> tag at page load

related questions