腳本標簽與外部腳本

Question

我的 html 文檔正文中的腳本標記內有一些簡單的代碼，可以完美執行：

<script type="text/javascript">
var anchor = document.getElementById("anchor");

function showCopy(e){
    copyDiv.innerHTML = "this is the new copy!"
}

function addEvent(obj, evt, fn, capture){
    if (onload.attachEvent){
        obj.attachEvent("on" + evt, fn);
    }
    else{
        if (!capture) capture = false;
        obj.addEventListener(evt, fn, capture);
    }
}
addEvent(anchor, "click", showCopy);
</script>

但是，當我將它移動到外部 js 文件時 – 我進入控制台：“TypeError：表達式‘onload’[null] 的結果不是 object。”

如果我嘗試使用window.onload處理程序加載addEvent function：

addOnload(addEvent);


function addOnload(newFunction){
  var oldOnload = window.onload;

  if (typeof oldOnload == "function") {
    window.onload = function(){
        if (oldOnload){
            oldOnload();
        }
        newFunction();
    }
  }
  else{
    window.onload = newFunction;
  }
}

“obj”和“obj.addEventListener”在控制台中拋出類型錯誤。 誰能解釋為什么它在腳本標簽中有效，但在鏈接文件中無效？

Answer 1

這兩者之間的代碼執行方式沒有顯着差異：

<script>
function foo() {
}
foo();
</script>

和這個

<script src="foo.js"></script>

...其中foo.js包含

function foo() {
}
foo();

因此，如果您的代碼在第一種情況下有效，而在第二種情況下無效，最可能的解釋是您在頁面的不同位置有script元素。 請記住，腳本是與文檔解析內聯執行的，因此腳本是在其引用的內容之上還是之下很重要。 （如果腳本只是設置一個稍后將被調用的處理程序，並且該處理程序引用尚不存在的元素，那么只要在處理程序執行時它們存在就可以。）

內聯腳本和從外部文件加載的腳本之間存在細微差別（除了必須下載文件的明顯位），即在外部文件的情況下，瀏覽器不會閱讀腳本對於腳本標記的末尾，如果實際字符</script>出現在您的腳本中（例如，在您將在某個時候使用的字符串文字中 - 這就是您會看到它的原因）有時寫成<\/script> ，因為反斜杠對 JavaScript 沒有影響，但字符串不再匹配瀏覽器正在尋找的內容）。 但這是代碼在外部文件中工作時無法在線工作的原因，而不是相反。

Answer 2

當你把它放在 <body> 中時，它是在元素錨點之前還是之后？ 問題是，當您包含腳本文件時，DOM 尚未加載，錨點將是未定義的。 選項是在錨點之后包含腳本文件，或者更好的是在之后或做這樣的事情（外部）：

myload = function(){
  var anchor = document.getElementById("anchor");

  function showCopy(e){
    copyDiv.innerHTML = "this is the new copy!"
  }

  function addEvent(obj, evt, fn, capture){
    if (onload.attachEvent){
        obj.attachEvent("on" + evt, fn);
    }
    else{
        if (!capture) capture = false;
        obj.addEventListener(evt, fn, capture);
    }
  };
  addEvent(anchor, "click", showCopy);
};
window.onload = myload;

腳本標簽與外部腳本

問題描述

2 個解決方案

解決方案1
1 2011-06-22 16:27:18

解決方案2
0 已采納 2011-06-22 16:26:43

腳本標簽與外部腳本

問題描述

2 個解決方案

解決方案1 1 2011-06-22 16:27:18

解決方案2 0 已采納 2011-06-22 16:26:43

解決方案1
1 2011-06-22 16:27:18

解決方案2
0 已采納 2011-06-22 16:26:43