當我在html文件的head標簽之間引用外部文件時，為什么JavaScript不運行？

Question

當我將指向JS文件的鏈接放在html標頭標記之間時，js文件將無法運行。 但是，如果我將外部js鏈接放在我的body標簽之后或大部分html代碼之后的某個地方，該文件就會運行。 當我在head標簽之間鏈接外部文件時，有什么方法可以使外部js文件運行。 我還應該提到我正在外部js文件中執行HTML DOM。

HTML部分：

<!DOCTYPE html>

<html>
<head>
    <title>HTMLDOM Practice</title>
    <link rel="stylesheet" type="text/css" href="HTMLDOM Practice.css"/>
    <!--I would like to put external js file here-->
</head>
<body>
    <div id="box">
        <p id="txt">Hello World!</p>
    </div>
</body>
    <script src="HTMLDOM Practice.js"></script>
</html>

Javascript / HTML DOM部分：

var x = document.getElementById('txt'); 
var b = document.getElementById('box');

x.addEventListener('click',irt,false);
b.addEventListener('click',irt,false);

function irt(){
    x.innerHTML="Goodbye world!";
    b.style.padding="20px"; 
}

Answer 1

我知道將JS代碼放在頁面底部只是為了使用DOM會很煩人。 作為一種好習慣，我通常將JS加載到頭部。

您可以解決類似這樣的問題。 1）在您的JS文件中放置一個函數進行初始化2）調用初始化函數OnLoad。

JS FILE看起來像這樣

var x;
var b;

function irt(){
    x.innerHTML="Goodbye world!";
    b.style.padding="20px"; 
} 

function setEverything(){
    x = document.getElementById('txt'); 
    b = document.getElementById('box');

    x.addEventListener('click',irt,false);
    b.addEventListener('click',irt,false);
}

HTML正文標簽

<body onload="setEverything()">

Answer 2

我看到的問題是JS在DOM完成加載之前正在運行。 要解決此問題，只需將defer添加到您的script標簽中，這將延遲JS的執行，直到其他所有操作完成：

<script src="HTMLDOM Practice.js" defer></script>

此外，如果瀏覽器支持，則可以使用async選擇異步下載並執行JS文件。 您可以將其與defer結合使用，以在不同的瀏覽器中獲得最佳效果：

<script src="HTMLDOM Practice.js" async defer></script>

當我在html文件的head標簽之間引用外部文件時，為什么JavaScript不運行？

問題描述

2 個解決方案

解決方案1
1 已采納 2014-10-24 00:49:44

解決方案2
1 2014-10-24 00:55:26

當我在html文件的head標簽之間引用外部文件時，為什么JavaScript不運行？

問題描述

2 個解決方案

解決方案1 1 已采納 2014-10-24 00:49:44

解決方案2 1 2014-10-24 00:55:26

解決方案1
1 已采納 2014-10-24 00:49:44

解決方案2
1 2014-10-24 00:55:26