zoukankan      html  css  js  c++  java
  • Javascript进阶篇——浏览器对象—History对象

    History 对象
    history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。
    窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。

    语法:

    window.history.[属性|方法]
    //window可以省略。

    History 对象属性


    History 对象方法

    使用length属性,当前窗口的浏览历史总长度,代码如下:

    1 <script type="text/javascript">
    2   var HL = window.history.length;
    3   document.write(HL);
    4 </script>

    返回前一个浏览的页面
    back()方法,加载 history 列表中的前一个 URL。

    语法:

    window.history.back();

    比如,返回前一个浏览的页面,代码如下:

    window.history.back();
    //注意:等同于点击浏览器的倒退按钮。

    back()相当于go(-1),代码如下:

    window.history.go(-1);

    例:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5 <title>无标题文档</title>
     6 </head>
     7 <script type="text/javascript">
     8     function GoBack() {
     9         window.history.back();
    10     }  
    11 </script>
    12 </head>
    13 <body>
    14     点击下面的锚点链接,添加历史列表项:
    15     <br />
    16     <a href="#target1">第一个锚点</a>
    17     <a name="target1"></a>
    18     <br />
    19     <a href="#target2">第二个锚点</a>
    20     <a name="target2"></a>
    21     <br /><br />
    22     使用下面按钮,实现返回前一个页面:
    23     <form>
    24         <input type="button"  value="返回前一个页面" onclick="GoBack();" />        
    25     </form>
    26 </body>
    27 </html>

    返回浏览历史中的其他页面
    go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。

    语法:

    window.history.go(number);

    参数:
      1  --- 前一个,go(1)等价forward()
      0  --- 当前页面
      -1 --- 后一个,go(-1)等价back()
      其他数值 --- 要访问的URL在history的URL列表中的相对位置。

    浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下:

    window.history.go(-2);

    和在浏览器中单击两次后退按钮操作一样。
    同理,返回当前页面之后浏览过的第三个历史页面,代码如下:

    window.history.go(3);

    例:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5 <title>无标题文档</title>
     6 </head>
     7  <script type="text/javascript">
     8     function GoBack() {
     9         history.go(-1);
    10     }
    11 
    12     function GoForward() {
    13          history.go(2);
    14     }
    15 </script>
    16 </head>
    17 <body>
    18     点击下面的锚点链接,添加历史列表项:    
    19     <br />
    20     <a href="#target1">第一个锚点</a>
    21     <a name="target1"></a>
    22     <br />
    23     <a href="#target2">第二个锚点</a>
    24     <a name="target2"></a>
    25     <br /><br />
    26     使用下面按钮,实现返回前或下一个页面:
    27     <form>
    28         <input type="button"  value="返回前一个页面" onclick="GoBack();" />
    29         <input type="button"  value="返回下一个页面" onclick="GoForward();" /> 
    30     </form>
    31 </body>
    32 </html>
     
  • 相关阅读:
    二分多重匹配(HDU5093)
    2-sat(and,or,xor)poj3678
    某个点到其他点的曼哈顿距离之和最小(HDU4311)
    第k最短路A*启发式搜索
    求树的直径和中心(ZOJ3820)
    并查集hdu4424
    map容器结构体离散化
    二维坐标系极角排序的应用(POJ1696)
    【进阶3-3期】深度广度解析 call 和 apply 原理、使用场景及实现(转)
    判断js数据类型的四种方法,以及各自的优缺点(转)
  • 原文地址:https://www.cnblogs.com/alice-shan/p/5249842.html
Copyright © 2011-2022 走看看