HTML DOM PopStateEvent Object

HTML Web Development Front End Technology

The HTML DOM popStateEvent object is an event handler for the popstate event which occurs when window’s history changes.

Property of PopStateEvent

Property	Explanation
state	It returns an object that represents a copy of the history entries.

Example

Let us see an example of HTML DOM popStateEvent Object −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-size:1.2rem;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM PopStateEvent Event Demo</h1>
<button onclick="display()" class="btn">Click Me</button>
<script>
   function display(){
      window.onpopstate = function(event) {
         alert("location: " + document.location +
            ", state: " + JSON.stringify(event.state));
      };
      history.pushState({
         page: 1
      }, "title home", "?page=home");
      history.pushState({
         page: 2
      }, "title about", "?page=about");
      history.replaceState({
         page: 3
      }, "title contact", "?page=contact");
      history.back();
      history.back();
   }
</script>
</body>
</html>