如何在 HTML 中使用者導航到頁面時執行指令碼？

本文需要執行的任務是在 HTML 中使用者導航到頁面時執行指令碼。

我們可以透過使用“onpageshow 事件”來完成上述任務（在 HTML 中使用者導航到頁面時執行指令碼）。在我們深入示例之前，讓我們先了解一下 HTML 中 onpageshow 事件的定義和用法。

HTML onpageshow 事件

HTML 中的onpageshow事件發生在使用者導航到網頁時。每次頁面載入時都會發生此事件。

語法

以下是 HTML 中 onpageshow 事件的語法：

<element onpageshow = "myScript">

以下是在使用者導航到 HTML 頁面時，我們在 HTML 中使用 onpageshow 事件的一些示例。

示例 1

在此示例中，

  • 我們在使用者導航到 HTML 頁面時使用了 onpageshow 事件。

  • 我們在函式內部編寫了一個 alert() 方法。因此，無論何時使用者嘗試導航到頁面，都會觸發 onpageshow 事件。

<!DOCTYPE html>
<html>
<head>
   <title>Execute a script when a user navigates to a page in HTML?</title>
</head>
<body onpageshow="navigate()">
   <h2>Execute a script when a user navigates to a page in HTML?</h2>
   <p><b>Note:</b> The <strong>"onpageshow"</strong> event in HTML will not supported in Internet Explorer 10 and before versions.</p>
   <script>
      function navigate() {
         alert("Welcome to the page!");
      }
   </script>
</body>
</html>

如輸出所示；當用戶嘗試導航到頁面時，將在視窗上顯示一個警報。

示例 2

在下面的示例中，

  • 我們在使用者導航到 HTML 頁面時使用了 onpageshow 事件。

  • 我們在函式內部編寫了一個列印語句。因此，無論何時使用者嘗試導航到頁面，都會觸發 onpageshow 事件。

<!DOCTYPE html>
<html>
<head>
   <title>Execute a script when a user navigates to a page in HTML?</title>
</head>
<body onpageshow="navigate()">
   <h2>Execute a script when a user navigates to a page in HTML?</h2>
   <p><b>Note:</b> The <strong>"onpageshow"</strong> event in HTML will not supported in Internet Explorer 10 and before versions.</p>
   <h2 id="heading"> </h2>
   <script>
      function navigate() {
         document.getElementById("heading").innerHTML = "Welcome to the page!";
      }
   </script>
</body>
</html>

如輸出所示，當用戶嘗試導航到頁面時，將執行列印語句。

示例 3

在下面的示例中，

  • 我們在使用者導航到 HTML 頁面時使用了 onpageshow 事件。

  • 我們在函式內部編寫了一個列印語句。因此，無論何時使用者嘗試導航到頁面，都會觸發 onpageshow 事件。

  • 在以下程式碼中；我們編寫了“window.onpageshow”，這裡的 window 介面表示包含 DOM 文件的視窗。

<!DOCTYPE html>
<html>
<head>
   <title>Execute a script when a user navigates to a page in HTML?</title>
</head>
<body>
   <h2>Execute a script when a user navigates to a page in HTML?</h2>
   <h3 id="para"></h3>
   <script>
     function Navigate() {
       document.getElementById("para").innerHTML = "Welcome to the page!";
     }
     window.onpageshow = Navigate;
   </script>
</body>
</html>

如輸出所示，當用戶嘗試導航到頁面時，將執行列印語句。

更新於： 2022-11-08

168 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告