onpageshow Event

DOM Events PageTransitionEvent

Definition and Usage

The onpageshow event occurs when the user navigates to the web page.

onpageshow Event and onload EventSimilarly, the difference is that it occurs after the onload event of the page first load. In addition, the onpageshow event occurs each time the page is loaded, and the onload event does not occur when the page is loaded from the cache.

To determine whether the page is loaded directly from the server or from the cache, you can use the PageTransitionEvent object's persisted Property. If the page is cached by the browser, this property returns true, otherwise it returns false (see more examples below).

Example

Example 1

Execute JavaScript when the user navigates to the web page:

<body onpageshow="myFunction()">

Try It Yourself

Example 2

Check if the page is cached by the browser:

function myFunction(event) { 
  alert(event.persisted);
}

Try It Yourself

Syntax

In HTML:

<element onpageshow="myScript">

Try It Yourself

In JavaScript:

object.onpageshow = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("pageshow", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() Method.

Technical Details

Bubbling: Not Supported
Cancelable: Not Supported
Event Type: PageTransitionEvent
Supported HTML Tags: <body>
DOM Version: Level 3 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports this event.

Event Chrome IE Firefox Safari Opera
onpageshow Support 11.0 Support 5.0 Support
DOM Events PageTransitionEvent