JavaScript 視窗載入函式呼叫

Muhammad Muzammil Hussain 2023年1月30日 2022年5月11日
  1. window.onload 功能用法與 HTML 中的示例
  2. 用幾個步驟檢查給定的 HTML 程式碼
  3. 檢視相同結果的替代方法
JavaScript 視窗載入函式呼叫

本文通過一個例子來解釋 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 標籤的 onLoadwindow.onload 具有相同的功能,可以在完成頁面載入後執行語句。