Question

我正在编写小型JavaScript代码，它将在html页面加载时加载外部js文件。

我测试了两种方式。

案例1：使用document.write添加＆lt; script＆gt;标签。它适用于所有浏览器（IE，FF，Safari，Chrome，Opera）。

案例2：使用DOMElement.appendChild添加＆lt; script＆gt;标记为＆lt; haed＆gt;元件。

仅适用于IE，FF和Opera。不适用于Safari和Chrome。

在这两种情况下，我都期待新的＆lt; script＆gt;正在＆lt; head＆gt;之前插入标记结束标签。所以新的＆lt; script＆gt;在处理＆lt; body＆gt;之前评估tag，并且在调用window.onload时，“success”变量应为true。

但它不适用于Safari和Chrome。

任何人都可以判断这应该或不应该有效吗？谢谢。

<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”只是一行代码。

success = true;

Answer 1

请改为尝试：

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

但是将它放在BODY标签开头的SCRIPT标签中

Answer 2

在评估你的javascript时，DOM没有完全构建，head元素甚至没有完成。在HTML页面完全加载之前，您通常无法访问或操作DOM（getElementsByTagName和appendChild等）。

Safari和Chrome不评估页面加载时动态添加的<script>标记</script>

2 个答案: