如何在 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 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告