如何在 HTML 中元素載入完成後執行指令碼?


在這篇文章中,我們將學習如何在 HTML 中元素載入完成後執行指令碼。

當物件載入完成後,就會發生 onload 事件。onload 最常用於 <body> 元素 中,以便在網頁完全載入其所有內容後執行指令碼。這可以用於許多事情,例如檢查 Cookie 或根據使用者的瀏覽器設定頁面的適當版本。

讓我們深入瞭解本文,以更深入地瞭解如何在 HTML 中元素載入完成後執行指令碼。

使用 Onload 方法

元素載入完成後,就會發生 onload 事件。要執行網頁完全載入後的指令碼,請將其與 body 元素一起使用。

語法

以下是 onload 方法的語法。

<body onload="functionToBeExecuted">

示例

在以下示例中,我們使用 onload 方法。

<!DOCTYPE html>
<html>
<body onload="loadFunction()">
   <h1>Welcome To TutorialsPoint</h1>
   <script>
      function loadFunction() {
         alert("Loaded Successfully");
      }
   </script>
</body>
</html>

當指令碼執行時,事件會被觸發,並在網頁上顯示一個警報“載入成功”。

如果使用者點選“確定”,頁面將成功載入並顯示文字“歡迎來到 tutorialspoint”。

使用 window.onload 方法

window 元素的 onload 屬性用於在網頁完全載入後執行指令碼。網頁載入後,onload 屬性會啟用該函式。

語法

以下是 window.onload 方法的語法。

window.onload = function exampleFunction() {
   // Function to be executed
}

示例

考慮以下示例,我們使用 window.onload 方法。

<!DOCTYPE html>
<html>
<body>
   <h1>The Best E-Way Learning.</h1>
   <script>
      function loadFunction() {
         alert("Window Loaded Successfully");
      }
      window.onload = loadFunction();
   </script>
</body>
</html>

執行上述指令碼後,輸出視窗會彈出,並在網頁上觸發事件時顯示警報“視窗載入成功”。

當用戶點選“確定”時,視窗將成功載入並在網頁上顯示文字“最佳線上學習方式”。

更新於: 2023年11月22日

2K+ 閱讀量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.