history对象

游鹄君2025年4月30日大约 2 分钟

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>history</title>
</head>
<body>
  <a href="./his1.html">his1</a>
  <a href="./his2.html">his2</a>
  <a href="./his3.html">his3</a>
 
 
  <button>上一页</button>
  <button>下一页</button>
  <button>go向后</button>
  <button>go向前</button>
 
  <script type="text/javascript">
    var buts = document.getElementsByTagName('button');
    console.log('buts');
    //第一种方式 一页一页改变
    //向后
    buts[0].onclick = function()
    {
     //alert('哈哈');
     history.back();
    }
    //向前
    buts[1].onclick = function()
    {
     history.forward();
    }
 
    //第二种方式
    buts[2].onclick = function()
    {
     //-1就代表向后1页 -2就代表向后2页
     history.go(-1);
    }
 
    buts[3].onclick = function()
    {
     //1就代表向前1页 2就代表向前2页
     history.go(1);
    }
  </script>
</body>
</html>

辅助示例

his1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>his1</title>
</head>
<body>
  1111111111111111111111111111111111111111111
  <a href="./his1.html">his1</a>
  <a href="./his2.html">his2</a>
  <a href="./his3.html">his3</a>
 
 
  <button>上一页</button>
  <button>下一页</button>
  <button>go向后</button>
  <button>go向前</button>
 
  <script type="text/javascript">
    var buts = document.getElementsByTagName('button');
    console.log('buts');
    //第一种方式 一页一页改变
    //向后
    buts[0].onclick = function()
    {
     //alert('哈哈');
     history.back();
    }
    //向前
    buts[1].onclick = function()
    {
     history.forward();
    }
 
    //第二种方式
    buts[2].onclick = function()
    {
     //1就代表向后1页 2就代表向后2页
     history.go(-1);
    }
 
    buts[3].onclick = function()
    {
     //-1就代表向前1页 -2就代表向前2页
     history.go(1);
    }
  </script>
</body>
</html>

his2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>his1</title>
</head>
<body>
  2222222222222222222222222222222222222222
  <a href="./his1.html">his1</a>
  <a href="./his2.html">his2</a>
  <a href="./his3.html">his3</a>
 
 
  <button>上一页</button>
  <button>下一页</button>
  <button>go向后</button>
  <button>go向前</button>
 
  <script type="text/javascript">
    var buts = document.getElementsByTagName('button');
    console.log('buts');
    //第一种方式 一页一页改变
    //向后
    buts[0].onclick = function()
    {
     //alert('哈哈');
     history.back();
    }
    //向前
    buts[1].onclick = function()
    {
     history.forward();
    }
 
    //第二种方式
    buts[2].onclick = function()
    {
     //1就代表向后1页 2就代表向后2页
     history.go(-1);
    }
 
    buts[3].onclick = function()
    {
     //-1就代表向前1页 -2就代表向前2页
     history.go(1);
    }
  </script>
</body>
</html>

his3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>his1</title>
</head>
<body>
  3333333333333333333333333333333333333333333
  <a href="./his1.html">his1</a>
  <a href="./his2.html">his2</a>
  <a href="./his3.html">his3</a>
 
 
  <button>上一页</button>
  <button>下一页</button>
  <button>go向后</button>
  <button>go向前</button>
 
  <script type="text/javascript">
    var buts = document.getElementsByTagName('button');
    console.log('buts');
    //第一种方式 一页一页改变
    //向后
    buts[0].onclick = function()
    {
     //alert('哈哈');
     history.back();
    }
    //向前
    buts[1].onclick = function()
    {
     history.forward();
    }
 
    //第二种方式
    buts[2].onclick = function()
    {
     //1就代表向后1页 2就代表向后2页
     history.go(-1);
    }
 
    buts[3].onclick = function()
    {
     //-1就代表向前1页 -2就代表向前2页
     history.go(1);
    }
  </script>
</body>
</html>