首頁 > web前端 > html教學 > 當使用者在HTML頁面上導航時執行腳本?

當使用者在HTML頁面上導航時執行腳本?

WBOY
發布: 2023-08-20 13:13:06
轉載
889 人瀏覽過

當使用者在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
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板