HTML onpageshow Event Attribute

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