Computer >> Máy Tính >  >> Lập trình >> HTML

Sự kiện chuyển trang HTML DOM

DOM PageTransitionEvent là một sự kiện xảy ra khi người dùng điều hướng giữa các trang web.

Thuộc tính của đối tượng PageTransitionEvent

Thuộc tính
Giải thích
vẫn tồn tại
Nó trả về giá trị true hoặc false tùy thuộc vào việc trang web có được lưu vào bộ nhớ đệm hay không.

Các loại sự kiện thuộc đối tượng PageTransitionEvent

Sự kiện
Giải thích
pageHide
Điều này xảy ra khi người dùng điều hướng khỏi trang web.
pageShow
Điều này xảy ra khi người dùng điều hướng đến một trang web.

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng PageTransitionEvent -

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

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Sự kiện chuyển trang HTML DOM

Nhấp vào “ Nhấp vào tôi ”Để biết liệu trang có được trình duyệt lưu vào bộ nhớ đệm hay không.

Sự kiện chuyển trang HTML DOM