Javascript無法在HTML文件中工作

我已閱讀了有關此主題的可用鏈接，但他們沒有幫助。Javascript無法在HTML文件中工作

我試圖讓下面的代碼運行。「menu.html」將「world.html」加載到另一頁的div中，並且HTML出現，但不是JavaScript。

起初，我把JS放在一個單獨的文件中，但是當它沒有運行時，我把它移到了「world.html」中，但它沒有解決問題。我也嘗試過引用jQuery。

這是menu.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="layout.css"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script src="contact.js"></script> 
     <script src="preparePage.js"></script> 
    </head> 

    <body> 
     <a id="infoButton" class="infoButton" href="info.html"></a> 
     <a id="bodyButton" class="bodyButton" href="body.html"></a> 
     <a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a> 
     <a id="leaveButton" class="leaveButton" href="leave.html"></a> 
     <a id="contactButton" class="contactButton" onclick="contact(); return false;"></a> 
    </body> 

    <footer> 
    </footer> 
</html>

而且preparePage.js，它擺脫了菜單和負載world.html：

function preparePage() { 
    document.getElementById("box").style.backgroundImage = "none"; 
    $("#infoButton").fadeOut("slow"); 
    $("#bodyButton").fadeOut("slow"); 
    $("#leaveButton").fadeOut("slow"); 
    $("#contactButton").fadeOut("slow"); 
    $("#box").load("world.html", function enter() { 
     $("#enterButton").fadeOut("slow"); 
    }); 
}

最後但並非最不重要的，world.html ：

<!DOCTYPE html> 

<html> 
    <head> 
     <script type="text/javascript"> 
     function wut() { 
      window.alert("owo"); 
     } 
     </script> 
    </head> 

    <body onload="wut(); return false;"> 
     mhfkhgfhtfjhfjj<br><br> 
     <canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas> 
    </body> 

    <footer> 
    </footer> 
</html>

編輯：還包括launchpad.html，這是包含div的頁面menu.html和world.htm L負載：

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" type="text/css" href="layout.css"> 
     <link rel="stylesheet" type="text/css" href="menu.css"> 
    </head> 

    <body onload="openGame(); return false;"> 
     <div id="cloud"></div> 
     <div id="box" class="box"></div> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script src="openGame.js"></script> 
    </body> 

     <footer> 
     </footer> 
</html>

而且openGame.js，改變#box的形狀和載荷menu.html：

function openGame() { 
     $("#cloud").fadeOut("fast"); 
     $("#box").animate({ 
      height: '750px', 
      width: '1700px', 
      top: '100px', 
      left: '100px', 
      padding: '0px' 
     }); 
     $("#box").load("menu.html"); 
     document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')"; 
    }

來源

2016-08-07 Nienaber

不，沒有運氣：P – Nienaber

您沒有ID爲'box'的元素。 – trincot

沒有代碼Html –

除了顯而易見的事實，你不必與元素id box，請認識到jQuery 加載方法將不會觸發您在world.html中定義的onload回調。所以你需要自己打電話。

所以解決兩件事情：

定義box，例如
```
<div id="box"></div> 
```

呼叫wut()，從menu.html：

$("#box").load("world.html", function enter() { 
    wut(); 
    $("#enterButton").fadeOut("slow"); 
});

的onload=在加載這樣的時候，因爲瀏覽器有world.html有沒有影響只有一個已經加載的文檔。因此，沒有第二個load事件觸發。

或者你可以只在world.html剛剛閉幕</body>標記前添加腳本，接近尾聲，這將運行：

<script> 
    wut(); 
</script>

來源

2016-08-07 21:28:30 trincot

謝謝，這工作！因此，如果我用jQuery加載HTML，它不一定會調用我在該文件中的JavaScript？我能否在某處找到更多關於這是爲什麼在某篇文章中的信息？ – Nienaber

jQuery將使用它的'load'方法執行JavaScript，所以定義了'wut'函數。但它永遠不會被調用，因爲它只會在文檔加載時調用（它與'onload'綁定）。然而，這個事件並沒有被觸發，因爲文檔（這是整個內容，不僅* world.html *）已經加載。我將這些信息添加到答案中。 – trincot

正如你所寫，它的工作原理，你可以請答案被接受？ – trincot

我可以使用jQuery的上點擊事件，並確保您在腳本中引用的所有元素ID都出現在頁面中。另一件需要檢查的事情是你的腳本加載得很好，文件名的字母大小在Linux服務器上很重要。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="layout.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="contact.js"></script> 
    <script src="preparePage.js"></script> 
</head> 
<body> 
<ul id="menu"> 
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li> 
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li> 
<li><a id="enterButton" class="enterButton">test3</a></li> 
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li> 
<li><a id="contactButton" class="contactButton">test5</a></li> 
</ul> 
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a);"> 
test box 
</div> 
<footer> 
</footer> 
</body></html>

的Javascript：

$(document).ready(function() { 
     $("#enterButton").click(function() { 
     document.getElementById("box").style.backgroundImage = "none"; 
     $("#infoButton").fadeOut("slow"); 
     $("#bodyButton").fadeOut("slow"); 
     $("#leaveButton").fadeOut("slow"); 
     $("#contactButton").fadeOut("slow"); 
     $("#box").load("/zalun/VkCyH/app.html", function enter() { 
      $("#enterButton").fadeOut("slow"); 
     }) 
    }) 
    });

活生生的例子：https://jsfiddle.net/ucjs77L8/

來源

2016-08-07 21:49:35

Javascript無法在HTML文件中工作

回答

相關問題