Open In App

HTML onpageshow Event Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The onpageshow event occurs when a user navigates to a website. This event is quite similar to onload event but it occurs after the onload event. It occurs every time, when the page is loaded whereas the onload event does not occur when the page is loaded from the cache.

When a page is loaded or restored, it triggers and provides session history information. It is also useful for executing actions related to page visibility and loading states and enables developers to handle scenarios like page refresh or back-forward navigation.

Syntax: 

<element onpageshow = "script"> 

Supported Tags: 

Note: This event contains a single attribute script. The script is to be run on the onpageshow event. This event is used within the body tag.

Example:

In this example, we will see the implementation of the onpageshow tag with an example.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>onpageshow event</title>
</head>
 
<body onpageshow="Geeks()">
    <h1 style="color:green;text-align:center;">
        GeeksForGeeks
    </h1>
    <script>
        function Geeks() {
            alert("Welcome to GeeksForGeeks!");
        }
    </script>
</body>
 
</html>


Output: 

aq

Output

Example: 

In this example, we will see the implementation of the onpageshow tag with another example.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>onpageshow event</title>
</head>
 
<body onpageshow="displayMessage(event)">
    <h1 style="color:blue;text-align:center;">
        My Website
    </h1>
    <p id="welcomeMessage"></p>
    <script>
        function displayMessage(event) {
            // Check if the event is persisted to distinguish
           //  between initial page load and page navigation
            if (event.persisted) {
                console.log("Page is being shown to you.");
            } else {
                console.log("Page is being loaded for the first time.");
            }
 
        }
    </script>
</body>
 
</html>


Output:

dfr

Output

Supported Browsers:

  • Google Chrome 3 and above
  • Edge 12 and above
  • Firefox 6 and above
  • Opera 15 and above
  • Safari 5 and above


Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads