Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

HTML DOM PopStateEvent Object

HTML Web Development Front End Technology

The HTML DOM PopStateEvent object represents the event that is triggered when the browser's history changes, specifically when the user navigates using the back or forward buttons, or when the history is programmatically modified using history.back(), history.forward(), or history.go().

The popstate event is fired when the active history entry changes between two different history entries for the same document. It provides access to the state data that was stored when the history entry was created using pushState() or replaceState().

Syntax

Following is the syntax to handle the popstate event −

window.onpopstate = function(event) {
   // Handle the popstate event
};

Or using an event listener −

window.addEventListener('popstate', function(event) {
   // Handle the popstate event
});

PopStateEvent Properties

The PopStateEvent object has the following property −

Property Description Return Value
state Returns the state object associated with the history entry Any serializable JavaScript object or null

How PopStateEvent Works

The popstate event is only triggered when navigating between history entries, not when initially loading a page or when using pushState() or replaceState(). The event provides access to the state data that was stored when the history entry was created.

PopState Event Flow Page A Page B Page C pushState pushState back() - popstate fired back() - popstate fired User navigates back using browser buttons popstate event triggered with state data

Basic PopStateEvent Example

Following example demonstrates the basic usage of the PopStateEvent object −

<!DOCTYPE html>
<html>
<head>
   <title>PopStateEvent Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>PopState Event Demo</h2>
   <button onclick="createHistory()">Create History Entries</button>
   <button onclick="goBack()">Go Back</button>
   <p id="output">Current state will appear here</p>
   
   <script>
      // Set up popstate event listener
      window.onpopstate = function(event) {
         var output = document.getElementById('output');
         if (event.state) {
            output.innerHTML = 'PopState fired! State: ' + JSON.stringify(event.state);
         } else {
            output.innerHTML = 'PopState fired! No state data.';
         }
      };
      
      function createHistory() {
         history.pushState({page: 'home', data: 'Home Page'}, 'Home', '?page=home');
         history.pushState({page: 'about', data: 'About Page'}, 'About', '?page=about');
         document.getElementById('output').innerHTML = 'History entries created. Use browser back button or Go Back button.';
      }
      
      function goBack() {
         history.back();
      }
   </script>
</body>
</html>

The output shows how the PopState event captures state data when navigating through history −

Initial: Current state will appear here
After creating history: History entries created. Use browser back button or Go Back button.
After going back: PopState fired! State: {"page":"home","data":"Home Page"}

Advanced PopStateEvent Example

Following example shows a more comprehensive use of the PopStateEvent with different state objects −

<!DOCTYPE html>
<html>
<head>
   <title>Advanced PopStateEvent Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Navigation History Demo</h2>
   <div id="content" style="min-height: 100px; padding: 15px; background: #f5f5f5; margin: 10px 0;">
      Welcome to the homepage
   </div>
   <button onclick="goToAbout()">Go to About</button>
   <button onclick="goToContact()">Go to Contact</button>
   <button onclick="goToServices()">Go to Services</button>
   <p><strong>Use browser back/forward buttons to see PopState in action</strong></p>
   <div id="debug" style="margin-top: 20px; padding: 10px; background: #e3f2fd;"></div>
   
   <script>
      window.addEventListener('popstate', function(event) {
         var content = document.getElementById('content');
         var debug = document.getElementById('debug');
         
         if (event.state) {
            content.innerHTML = event.state.content;
            debug.innerHTML = 'PopState Event - Page: ' + event.state.page + ', URL: ' + window.location.href;
         } else {
            content.innerHTML = 'Welcome to the homepage';
            debug.innerHTML = 'PopState Event - No state data (likely initial page load)';
         }
      });
      
      function goToAbout() {
         var state = {page: 'about', content: '<h3>About Us</h3><p>This is the about page content.</p>'};
         history.pushState(state, 'About', '?page=about');
         document.getElementById('content').innerHTML = state.content;
      }
      
      function goToContact() {
         var state = {page: 'contact', content: '<h3>Contact Us</h3><p>Email: info@example.com</p>'};
         history.pushState(state, 'Contact', '?page=contact');
         document.getElementById('content').innerHTML = state.content;
      }
      
      function goToServices() {
         var state = {page: 'services', content: '<h3>Our Services</h3><ul><li>Web Development</li><li>Mobile Apps</li></ul>'};
         history.pushState(state, 'Services', '?page=services');
         document.getElementById('content').innerHTML = state.content;
      }
   </script>
</body>
</html>

This example creates a single-page application where navigation updates both the content and URL, and the PopState event restores the correct content when using browser navigation buttons.

Key Points

  • The popstate event is only fired when navigating between history entries, not when creating them with pushState() or replaceState().

  • The event.state property contains the state object that was passed to pushState() or replaceState().

  • If no state object was provided, event.state will be null.

  • The PopState event is essential for creating single-page applications (SPAs) that maintain proper browser history.

  • Always check if event.state exists before trying to access its properties to avoid errors.

Browser Compatibility

The PopStateEvent object is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The HTML5 History API, which includes pushState(), replaceState(), and the popstate event, provides a standardized way to manage browser history in web applications.

Conclusion

The PopStateEvent object is crucial for handling browser history changes in modern web applications. It allows developers to respond to user navigation and maintain application state when users use the browser's back and forward buttons, providing a seamless user experience in single-page applications.

Updated on: 2026-03-16T21:38:53+05:30

199 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements