HTML onpageshow Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The onpageshow HTML event attribute is used to specify a JavaScript function that will be executed when a web page is shown. The onpageshow event is similar to the onload event, but it occurs after the onload event and every time the page is shown, even if it is loaded from the cache.

The onpageshow event can be used to perform a variety of tasks, such as:

Updating the page's content based on the current date and time
Checking the user's login status and displaying the appropriate content
Showing or hiding certain elements on the page
Displaying a loading animation while the page is loading

To use the onpageshow event, simply add the attribute to the <body> element of your web page and specify the name of the JavaScript function that you want to be executed when the event occurs. For example:

<body onpageshow="myFunction()">

The myFunction() function will be executed every time the page is shown.

Here is an example of a JavaScript function that can be used to update the page's content based on the current date and time:

function myFunction() {
  // Get the current date and time
  var date = new Date();

  // Update the page's content
  document.getElementById("date").innerHTML = date.toLocaleDateString();
  document.getElementById("time").innerHTML = date.toLocaleTimeString();
}

When this function is executed, the date and time elements on the page will be updated with the current date and time.

By using the onpageshow event, you can ensure that your pages are always up-to-date and that the content is displayed in the most relevant way possible.

Syntax

<element onpageshow="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE HTML>

<html>



<body onpageshow="myFunction()">

<h1>Onpageshow Event!</h1>

<p>Reload the page to see the vent trigger again!</p>

<script>

function myFunction() {

    alert("EXAMPLE: Welcome!");

}

</script>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onpageshow event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.