JavaScript 視窗載入函式呼叫

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 視窗載入函式呼叫
Muhammad Muzammil Hussain 2023年1月30日
JavaScript JavaScript Window Onload Method
  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 標籤的 onLoad 和 window.onload 具有相同的功能，可以在完成頁面載入後執行語句。