HTML onpageshow Event Attribute
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:Â
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:
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
Share your thoughts in the comments
Please Login to comment...