Đối tượng PopStateEvent trong HTML DOM

Đối tượng PopStateEvent trong HTML DOM là trình xử lý sự kiện cho sự kiện popstate, xảy ra khi lịch sử của cửa sổ (window's history) thay đổi.

Thuộc tính của PopStateEvent

Ví dụ

Ví dụ minh họa đối tượng PopStateEvent:

<!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>Demo sự kiện PopStateEvent DOM</h1>
<button onclick="display()" class="btn">Nhấn vào đây</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>

Kết quả

Nhấn nút Nhấn vào đây để hiểu cách hoạt động của đối tượng PopStateEvent.