最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

I am writing small JavaScript code which will load external js files at html page loading.

I tested 2 ways.

Case 1: Used document.write to add <script> tag. It worked for all browsers (IE, FF, Safari, Chrome, Opera).

Case 2: Used DOMElement.appendChild to add <script> tag to the <haed> element.

Only worked for IE, FF, and Opera. Did NOT work for Safari and Chrome.

In both cases, I expected new <script> tag is being inserted before <head> closing tag. So the new <script> tag is evaluated before processing <body>, and by the time window.onload is called, "success" variable should be true.

But it wasn't for Safari and Chrome.

Can anyone tell if this should or shouldn't work? Thank you.

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

      window.onload = function()
      {
        document.getElementById("result").innerHTML = success? "OK": "ERROR!";
      }

      // TEST CASE 1.
      // Works for all browsers.
      document.write('<script type="text/javascript" src="foo.js"></' + 'script>');

      // TEST CASE 2.
      // Only works for Opera, FireFox, Opera.
      // var scriptElem = document.createElement("script");
      // scriptElem.setAttribute("type", "text/javascript");
      // scriptElem.setAttribute("src", "foo.js");
      // 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>

"foo.js" is just one line of code.

success = true;

I am writing small JavaScript code which will load external js files at html page loading.

I tested 2 ways.

Case 1: Used document.write to add <script> tag. It worked for all browsers (IE, FF, Safari, Chrome, Opera).

Case 2: Used DOMElement.appendChild to add <script> tag to the <haed> element.

Only worked for IE, FF, and Opera. Did NOT work for Safari and Chrome.

In both cases, I expected new <script> tag is being inserted before <head> closing tag. So the new <script> tag is evaluated before processing <body>, and by the time window.onload is called, "success" variable should be true.

But it wasn't for Safari and Chrome.

Can anyone tell if this should or shouldn't work? Thank you.

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

      window.onload = function()
      {
        document.getElementById("result").innerHTML = success? "OK": "ERROR!";
      }

      // TEST CASE 1.
      // Works for all browsers.
      document.write('<script type="text/javascript" src="foo.js"></' + 'script>');

      // TEST CASE 2.
      // Only works for Opera, FireFox, Opera.
      // var scriptElem = document.createElement("script");
      // scriptElem.setAttribute("type", "text/javascript");
      // scriptElem.setAttribute("src", "foo.js");
      // 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>

"foo.js" is just one line of code.

success = true;
Share Improve this question edited Feb 6, 2010 at 9:12 LiraNuna 67.3k15 gold badges121 silver badges141 bronze badges asked Feb 6, 2010 at 8:29 3rensho3rensho 211 gold badge1 silver badge3 bronze badges 2
  • Just a ment — by modifying your example slightly, I managed to get a different behavior in Opera, Firefox, Safari, and Safari while stepping through the code. – Josh Lee Commented Feb 6, 2010 at 9:34
  • incidentally, '...</'+'script> is still invalid. The simplest valid way to protect an end-tag string literal inside a script block is <\/script. – bobince Commented Feb 6, 2010 at 13:26
Add a ment  | 

2 Answers 2

Reset to default 4

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

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.

发布评论

评论列表(0)

  1. 暂无评论