在 HTML 中用户导航到页面时执行脚本？

本文需要执行的任务是在用户导航到 HTML 页面时执行脚本。

我们可以使用“onpageshow 事件”来完成上述任务（在用户导航到 HTML 页面时执行脚本）。在进入示例之前，让我们先了解一下 HTML 中 onpageshow 事件的定义和用法。

HTML onpageshow 事件

HTML 中的onpageshow事件发生在用户导航到网页时。每次页面加载时都会发生此事件。

语法

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

<element onpageshow = "myScript">

以下是我们在用户导航到 HTML 页面时在 HTML 中使用 onpageshow 事件的示例。

示例 1

在本例中，

  • 我们在用户导航到 HTML 页面时使用了 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 页面时使用了 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 页面时使用了 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月8日

浏览量 168

启动你的职业生涯

完成课程获得认证

开始学习
广告