首頁 > web前端 > html教學 > 當元素在HTML中載入完成時,執行一個腳本嗎?

當元素在HTML中載入完成時,執行一個腳本嗎?

WBOY
發布: 2023-08-29 20:41:05
轉載
1138 人瀏覽過

當元素在HTML中載入完成時,執行一個腳本嗎?

在本文中,我們將學習如何在 HTML 中載入完元素後執行腳本。

載入物件時,會發生 onload 事件。 Onload 最常在

元素中使用,用於在網頁完全載入其所有內容後執行腳本。這可以用於多種用途,例如檢查 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>
登入後複製

當腳本執行時,事件被觸發並在網頁上顯示「載入成功」的警報。

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

使用window.onload方法

視窗元素的 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>
登入後複製

執行上述腳本時,會彈出輸出窗口,當網頁上觸發事件時,會顯示「視窗已成功載入」的警報。

當使用者按一下「確定」時,視窗載入成功,並在網頁上顯示文字「最佳電子方式學習」。

以上是當元素在HTML中載入完成時,執行一個腳本嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板