Safari和Chrome無法動態評估添加<script> tag at page load

Question

我正在編寫小的JavaScript代碼，它將在html頁面加載時加載外部js文件。

我測試了2種方法。

情況1：使用document.write添加<script>標記。 它適用於所有瀏覽器（IE，FF，Safari，Chrome，Opera）。

情況2：使用DOMElement.appendChild將<script>標記添加到<haed>元素。

僅適用於IE，FF和Opera。 不適用於Safari和Chrome。

在這兩種情況下，我都希望在<head>結束標記之前插入新的<script>標記。 因此，在處理<body>之前將評估新的<script>標記，並且在調用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> tag at page load

問題描述

2 個解決方案

解決方案1
4 2010-02-06 11:43:35

解決方案2
1 2010-02-06 09:23:22

Safari和Chrome無法動態評估添加<script> tag at page load

問題描述

2 個解決方案

解決方案1 4 2010-02-06 11:43:35

解決方案2 1 2010-02-06 09:23:22

解決方案1
4 2010-02-06 11:43:35

解決方案2
1 2010-02-06 09:23:22