HTML DOM PageTransition Event

HTMLWeb DevelopmentFront End Technology

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 −

 Live Demo

<!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 −

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

raja
Published on 22-Jul-2019 13:20:30
Advertisements