JavaScript 視窗載入函式呼叫
Muhammad Muzammil Hussain
2023年1月30日
2022年5月11日
本文通過一個例子來解釋 JavaScript 中 window.onload 方法的用途。一旦瀏覽器上的頁面完成載入,window.onload 函式就會執行以執行任務。
window.onload
功能用法與 HTML 中的示例
window.onload
方法在頁面完全載入到瀏覽器(以及所有影象、樣式、指令碼和 CDN)時觸發。在這裡,你可以看到一個 HTML
頁面原始碼示例,該示例使用 window.onload 方法自動執行以顯示警告框。
<html>
<head>
<title>(Window.onload function in HTML)</title>
<script type="text/javascript">
function code(){
alert(" Alert inside code function Window.onload");
}
window.onload=code();
</script>
</head>
<body>
<h1> Graphic Designer Firm </h1>
<p1> A craft of creating visual content to communicate messages.</p1>
</br> <img src = "Graphic-Design.png" height="500px" width="500px" >
</br> <hr width="800">
</body>
</html>
在上面的 HTML
頁面原始碼中,你可以看到在 doctype html 中使用 JavaScript
的 <script type="text/javascript">
標記。在下一步中,在 <script>
標籤內宣告瞭 function code()
。
function code()
被稱為 window.onload
。當網頁完全載入影象和文字內容時,它會顯示預設警報對話方塊。
用幾個步驟檢查給定的 HTML
程式碼
按照這四個簡單的步驟,可以清楚地瞭解 window.onload
方法。
-
建立一個文字文件。你可以使用記事本或任何其他文字編輯工具。
-
將給定的程式碼貼上到建立的文字檔案中。
-
使用
.html
副檔名儲存該文字檔案,並使用任何預設瀏覽器開啟它。 -
你可以看到在完整頁面載入後立即彈出的警告框。
檢視相同結果的替代方法
你可以通過 body 標籤使用替代的 onload
事件來獲得警報訊息結果。下面是一個使用自動執行來呼叫包含警告框的函式程式碼的 body 標籤示例:
<script type="text/javascript">
function code(){
alert(" Alert inside code function");
}
</script>
<body onLoad="code()";>
在這兩個示例中,body 標籤的 onLoad
和 window.onload
具有相同的功能,可以在完成頁面載入後執行語句。