当用户在HTML页面上导航时执行脚本?

WBOY
发布: 2023-08-20 13:13:06
转载
870 人浏览过

当用户在HTML页面上导航时执行脚本?

The task we need to perform in this article is executing a script when a user navigates to a page in HTML.

We can do the above task (executing a script when a user navigates to a page in HTML) by using "onpageshow Event". Before we jump into the examples let’s look into the definition and usage of onpageshow event in HTML.

HTML onpageshow事件

The onpageshow event in HTML occurs when a user navigates to a webpage. This event occurs every time the page is loaded.

语法

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

<element onpageshow = "myScript">
登录后复制

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

Example 1

In the example,

  • 当用户在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>
登录后复制

As we can see in the output; when the user tries to navigate to a page an alert will be displayed on the window.

Example 2

的中文翻译为:

示例2

In the example below,

  • 当用户在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>
登录后复制

As we can see in the output when the user tries to navigate to a page the print statement will be executed.

Example 3

的中文翻译为:

示例3

In the example below,

  • 当用户在HTML中导航到一个页面时,我们使用了onpageshow事件。

  • 我们在函数内部编写了一个打印语句。因此,每当用户尝试导航到一个页面时,onpageshow事件将被触发。

  • In the below code; we have written "window.onpageshow", here window interface represents a window containing a DOM document.

<!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>
登录后复制

As we can see in the output when the user tries to navigate to a page the print statement will be executed.

以上是当用户在HTML页面上导航时执行脚本?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板