JavaScript的history对象实现页面前进、后退、跳转

最新推荐文章于 2023-02-21 13:48:52 发布

microcosmv

最新推荐文章于 2023-02-21 13:48:52 发布

阅读量1w

点赞数 2

分类专栏： JavaScript 文章标签： javascript history对象页面前进后退跳转

本文链接：https://blog.csdn.net/microcosmv/article/details/51922116

版权

JavaScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

History 对象的方法

方法	描述
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

个人理解是go内参数当前页面为0，前边打开的页面为负数，后面打开的页面为正数。

例1：实现a、b、c页面之间前进后退和跳转。

a页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> a </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    function func(){
        history.forward();
    }
    function func1(){
        history.go(2);
    }
//-->
</script>
 <body >
    <a href = "b.html">b.html</a>
    <input type="button" value="前进" onclick="func()" />
    <input type="button" value="go到c" onclick="func1()" />
 </body>
</html>

b页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> b </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    function func(){
        history.forward();
    }
    function func1(){
        history.back();
    }
//-->
</script>
 <body >
    <a href = "c.html">c.html</a>
    <input type="button" value="前进" onclick="func()" />
    <input type="button" value="后退" onclick="func1()" />
 </body>
</html>

c页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> c </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    function func1(){
        history.back();
    }
    function func(){
        history.forward();
    }
//以当前页为0，往前的为负数。
    function func2(){
        history.go(-1);
    }
//-->
</script>
 <body >
    <input type="button" value="前进" onclick="func()" />
    <input type="button" value="后退" onclick="func1()" />
    <input type="button" value="go到b" onclick="func2()" />
 </body>
</html>

先打开a页面，通过超链进入b页面，再通过超链进入c页面，然后就可以在abc页面之间随意跳转了。

以上作为个人学习记录，仅供参考。

microcosmv

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的history对象实现页面前进、后退、跳转

History 对象的方法方法描述 back() 加载 history 列表中的前一个 URL forward() 加载 history 列表中的下一个 URL go() 加载 history 列表中的某个具体页面个人理解是go内参数当前页面为0，前边打开的页面为负数，后面打开的页面为正数。例1：实现a、b、c页面之间前进后退和跳转。a页面代码：<!DOCTY
复制链接

扫一扫