CSS Portal

HTML onpageshow Event Attribute

☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee
onpageshow
HTML Event AttributeThis event attribute is supported by all modern browsers.
Updated 14th October 2023

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

<!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>
Open in 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.

This event attribute is supported by all modern browsers.

Desktop

Chrome
Edge
Firefox
Opera
Safari

Tablets & Mobile

Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-
Supported Unknown Not supported
☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee