HTML DOM PopStateEvent Object

HTMLWeb DevelopmentFront 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

PropertyExplanation
stateIt 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>

Output

This will produce the following output −

Click on “Click Me” button to understand how PopStateEvent Object works −

Click “Ok” −

raja
Published on 19-Jul-2019 17:23:58
Advertisements