Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when a user navigates to a page in HTML?
The onpageshow event in HTML allows you to execute a script whenever a user navigates to a page. This event fires every time a page loads, including when users navigate back using the browser's back button or reload the page.
HTML onpageshow Event
The onpageshow event occurs when a user navigates to a webpage. Unlike the onload event, onpageshow fires even when the page is loaded from the browser cache, making it ideal for initialization scripts that need to run every time the page is displayed.
Syntax
Following is the syntax for the onpageshow event in HTML −
<element onpageshow="myScript">
You can also use it with JavaScript −
window.onpageshow = function() {
// Your code here
};
Using onpageshow with Body Element
The most common approach is to attach the onpageshow event to the body element, which triggers the script as soon as the page becomes visible to the user.
Example − Alert on Page Navigation
<!DOCTYPE html>
<html>
<head>
<title>Execute Script on Page Navigation</title>
</head>
<body onpageshow="navigate()" style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Execute a script when a user navigates to a page</h2>
<p><b>Note:</b> The <strong>"onpageshow"</strong> event is not supported in Internet Explorer 10 and earlier versions.</p>
<script>
function navigate() {
alert("Welcome to the page!");
}
</script>
</body>
</html>
When the page loads, an alert dialog displays "Welcome to the page!" to notify the user that the script has executed.
Updating Page Content on Navigation
Instead of showing alerts, you can modify page content dynamically when the user navigates to the page.
Example − Display Welcome Message
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Content on Page Navigation</title>
</head>
<body onpageshow="navigate()" style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Execute a script when a user navigates to a page</h2>
<p><b>Note:</b> The <strong>"onpageshow"</strong> event is not supported in Internet Explorer 10 and earlier versions.</p>
<h2 id="heading" style="color: blue;"></h2>
<script>
function navigate() {
document.getElementById("heading").innerHTML = "Welcome to the page!";
}
</script>
</body>
</html>
The output displays the welcome message in blue text when the page loads −
Execute a script when a user navigates to a page Note: The "onpageshow" event is not supported in Internet Explorer 10 and earlier versions. Welcome to the page! (blue text)
Using window.onpageshow Property
You can also assign the event handler using the window.onpageshow property. The window interface represents a browser window containing a DOM document, providing global access to the onpageshow event.
Example − Window.onpageshow Assignment
<!DOCTYPE html>
<html>
<head>
<title>Window onpageshow Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Execute a script when a user navigates to a page</h2>
<h3 id="para" style="color: green;"></h3>
<script>
function Navigate() {
document.getElementById("para").innerHTML = "Welcome to the page!";
}
window.onpageshow = Navigate;
</script>
</body>
</html>
This approach separates the HTML structure from the JavaScript event assignment, providing cleaner code organization. The welcome message appears in green when the page loads.
onpageshow vs onload Event
The key difference between onpageshow and onload is their behavior with browser cache −
| onpageshow Event | onload Event |
|---|---|
| Fires every time the page is displayed | Fires only when page fully loads for the first time |
| Triggers when navigating back from cache | Does not trigger when loaded from cache |
| Better for initialization scripts | Suitable for resource-heavy operations |
| Supported in modern browsers (not IE 10 and below) | Universally supported across all browsers |
Practical Use Cases
The onpageshow event is particularly useful for −
Analytics tracking − Recording page views even when users navigate back
Real-time data updates − Refreshing content that may have changed
User interface initialization − Setting up interactive elements that need to work every time
Session management − Checking user authentication status on each page visit
Browser Compatibility
The onpageshow event is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, it is not supported in Internet Explorer 10 and earlier versions. For legacy browser support, consider using the onload event as a fallback.
Conclusion
The onpageshow event provides a reliable way to execute scripts every time a user navigates to a page, including when returning from browser cache. This makes it more suitable than onload for initialization scripts that need to run consistently, though browser compatibility should be considered for legacy support.
297 Views
