ThatManK Mobile Article

history对象

Category: JS Tutorial: DOM实战 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

页面一

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>

    <script>
      console.log(history);
      // History {length: 1, scrollRestoration: 'auto', state: null}
      // History {length: 8, scrollRestoration: 'auto', state: null}

      var btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        // history.forward();
        history.go(1);
      });
    </script>
  </body>
</html>

页面二

<!DOCTYPE html>
<html lang="en">
  <head> </head>

  <body>
    <a href="index.html">点击我去往首页</a>
    <button>后退</button>

    <script>
      var btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        // history.back();
        history.go(-1);
      });
    </script>
  </body>
</html>