Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM PageTransition Event


The DOM PageTransitionEvent is an event which occurs when a user navigates between the webpages.

Property of PageTransitionEvent object

Property
Explanation
persisted
It returns true or false value depending upon whether the webpage was cached or not.

Types of events belong to PageTransitionEvent object

Events
Explanation
pageHide
It happens when the user navigates away from a webpage.
pageShow
It happens when the user navigates to a webpage.

Example

Let us see an example of PageTransitionEvent object −

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      color:#fff;
      background: #ff7f5094;
      height:100%;
   }
   .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 PageTransitionEvent Event Demo</h1>
<button onclick="checkPage(event)" class="btn">Click me</button>
<script>
   function checkPage(event) {
      if (event.persisted) {
         confirm("Page was cached by the browser");
      } else {
         confirm("Page was not cached by the browser");
      }
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM PageTransition Event

Click on “Click me” button to know whether the page was cached by the browser or not.

HTML DOM PageTransition Event