外部JS代碼
[英]Extenal JS code
問題描述
我最近開始學習JS，但遇到一個我無法解決的問題...我嘗試了很多解決方案，但沒有任何幫助。
我有一個非常基本的JS代碼：
<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
該代碼在腳本位於下方時有效，但是如果我將相同的腳本與外部腳本連接在一起，並將其連接到HEADER中的HTML，則該腳本無法正常工作....
4 個解決方案
解決方案1
1 2012-08-31 10:18:38
HEADER中的HTML
如果將腳本放在<head> ，它將顯示在<p id="demo"> 。
由於腳本立即嘗試獲取getElementById('demo') ，因此該元素不存在。 因此，它變得undefined而不是元素。
您需要將腳本移動到元素的后面（如問題代碼中所示），或將代碼包裝在一個函數中，然后將該函數用作事件處理程序 （對於直到該元素才觸發的事件存在，例如load事件）。
解決方案2
1 2012-08-31 10:18:56
發生這種情況是因為尚未加載HTML頁面的文檔或<body>部分。
要解決該問題，請向<body> onLoad事件注冊一個事件處理程序，如下所示：
<html>
<head>
<script type="text/javascript">
function onDocumentReady() {
document.getElementById("demo").innerHTML="My First JavaScript";
}
window.onload = onDocumentReady;
</script>
</head>
<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
</body>
</html>
解決方案3
1 2012-08-31 10:19:11
這是關於操作的順序。 您擁有的腳本在被瀏覽器解析后將立即運行，這意味着，如果不存在ID為“ demo”的渲染元素，則不會發生任何事情。 只需將<script>塊放置在<script> <p>元素上方，您就會注意到這種現象（ JSFiddle示例 ）。 為了解決這個問題，您需要確保所有腳本都位於文檔的末尾（格式錯誤），或者正在使用某種方法使腳本在文檔完全加載后運行（首選）。 兩種最常見的方法是使用window.onload事件：
window.onload = document.getElementById("demo").innerHTML="My First JavaScript";
或合並JS庫（例如jQuery）並為此使用其內置方法：
$(document).ready(function() {
$("#demo").html("My First JavaScript");
}
解決方案4
1 已采納 2012-08-31 10:27:50
您應該將外部腳本包裝在
window.onload
例
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My first JS</title>
<script src="test.js"></script>
</head>
<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
</body>
</html>
JS文件名test.js
window.onload = function () {
document.getElementById("demo").innerHTML="My First JavaScript";
//more code can go here if you want
}
如何將外部JS小部件集成到angular 2中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.