Teach with us

Execute a script when a user navigates to a page in HTML?

HTMLWeb DevelopmentFront End Technology

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 event

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

Syntax

Following is the syntax of onpageshow event in HTML −

<element onpageshow = "myScript">

Following are the examples where we used onpageshow event in HTML when a user navigates to a page in HTML.

Example 1

In the example,

  • We have used to onpageshow event in HTML when a user navigates to a page in HTML.

  • We have written an alert() method inside the function. So whenever the user tries to navigate to a page the onpageshow event will be triggered.

<!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

In the example below,

  • We have used the onpageshow event in HTML when a user navigates to a page in HTML.

  • We have written a print statement inside the function. So whenever the user tries to navigate to a page the onpageshow event will be triggered.

<!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

In the example below,

  • We have used the onpageshow event in HTML when a user navigates to a page in HTML.

  • We have written a print statement inside the function. So whenever the user tries to navigate to a page the onpageshow event will be triggered.

  • 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.

raja
Nikhilesh Aleti
Updated on 08-Nov-2022 07:59:00

Previous Page Print Page Next Page  
Advertisements