[英]How to call a JavaScript function when the external JavaScript file is referenced at the end of the HTML body?
我知道當你想在 HTML 正文部分調用一個 JavaScript 函數時，你可以通過把<script> someFunction(); </script> <script> someFunction(); </script>在你的 body 標簽中，這是一個例子，我有這樣的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"
src="/Script.js"></script>
</head>
<body>
<script>
showAlert();
</script>
</body>
</html>
和這樣的 javascript 文件：
function showAlert(){
alert("This is an alert!");
}
這工作正常，但如果我將 JavaScript 文件引用放在正文的末尾，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script>
showAlert();
</script>
<script type="text/javascript"
src="/Script.js"></script>
</body>
</html>
不再調用函數showAlert() 。 能否請您回答以下2個問題：
showAlert() ？我之所以這么問是因為我知道在正文的末尾而不是在頭部引用 JavaScript 文件是一個很好的做法，這樣頁面將在加載所有 JavaScript 代碼之前首先呈現。
1) 腳本是線性加載的。 由於腳本尚未加載，函數未定義。 （這是在腳本內的對比函數吊裝。）
2）只需等待頁面加載。
window.onload = function(){
showAlert();
}
（簡單地做window.onload = showAlert由於原因 #1 將不起作用。在這里你延遲評估直到函數存在的時間。）
Javascript 按照給定的順序進行處理。 您試圖在定義 showAlert 之前調用 showAlert。 改成：
<body>
<script type="text/javascript"
src="/Script.js">
</script>
<script>
showAlert();
</script>
</body>
並且一切都應該按預期工作。
假設您想在頁面加載后立即運行 showAlert()，請嘗試添加一個 onload() 事件處理程序來調用 showAlert，而不是僅在腳本加載時調用它。 這可以通過幾種方式完成：
<body onload="showAlert();">
或以編程方式定義窗口 onload 事件，其中您當前的功能都在 html 中完成
window.onload = new function() {showAlert();}
或者（我認為這是首選方式，因為它不會取消綁定到 onload 事件的其他事件處理程序）
window.addEventListener("load", showAlert);
默認情況下，腳本按順序運行。 您的代碼不起作用，因為showAlert()在加載Script.js之前運行，因此此時函數showAlert尚未定義。
要使其工作，您必須延遲showAlert調用。
load事件已經在其他答案中提到過，但它會等待所有資源（如圖像）加載。 所以監聽DOMContentLoad事件通常會更好，該函數會被更快地調用。
<script> document.addEventListener('DOMContentLoaded', function() { showAlert(); }); </script> <script src="data:text/javascript, function showAlert() { console.log('Hello!') } "></script>
您的腳本不起作用的原因是網頁的解析方式..從上到下..這是一些鏈接（有助於了解為什么在底部添加腳本）。
1）在您的第一種情況下，瀏覽器在解析頁面時加載腳本，當您在正文中調用它時，它可用，因此它被調用。
2）在第二種情況下（我是錯別字）您在加載包含您的函數的腳本之前已經調用了函數。 所以在頁面解析瀏覽器不會找到它並繼續到下一行加載包含函數的腳本，因為它已經解析了調用，所以現在沒有任何影響。
如果您仍然想遵循第二種情況，您必須觸發函數調用（在確保加載所有資源后，即您的腳本）。 所以你可以使用window.load=<your function call>或者在 jQuery 的情況下把它放在里面
$(document).ready(function(){
//call here
});
在 HTML 文件中引用時，在外部 javascript 文件中未使用的 function
[英]Unused function in external javascript file when referenced in HTML file
如何將carousel（）外部javascript函數調用為html文件？
[英]how can i call carousel() an external javascript function into html file?
單擊 html 按鈕時，如何使用外部 javascript 文件調用 function？
[英]How to use an external javascript file to call on function when a html button is clicked?
從外部js文件調用位於主html中的javascript函數
[英]call javascript function located in main html from external js file
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.