发表评论
444 次浏览

A+

所属分类：Web前端

摘要

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

便宜好用的国外VPS推荐

一、history对象

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

history对象的属性：length，返回浏览器历史列表中的 URL 数量。

history对象的方法：

back()：加载 history 列表中的前一个 URL。

forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。

go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面。

1、013-history.html

<body>     <a href="013-history-a.html">013-history-a.html</a>     <h1>我是第一个页面</h1>     <input type="button"  value="前进" onclick="window.history.forward();" />     <script>         console.log(window.history);     </script> </body>

2、013-history-a.html

<body>     <a href="013-history-b.html">013-history-b.html</a>     <h1>我是A页面</h1>     <input type="button" value="后退"  onclick="window.history.back();"/> </body>

3、013-history-b.html

<body>       <h1>我是B页面</h1>       <input type="button" value="第一个页面" onclick="window.history.go(-2);"/>       <input type="button" value="后退"  onclick="window.history.back();"/> </body>

二、location对象

location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。

location 对象的属性 href：设置或返回完整的 URL

location 对象的方法

reload()：重新加载当前文档。

replace()：用新的文档替换当前文档。

<script type="text/javascript">     function openBaidu(){         // 没有历史记录,用新的文档替换当前文档         // window.location.replace("http://www.baidu.com");         // console.log(window.location.href); // 获取完整的url         window.location.href = "http://www.baidu.com";     } </script> <body>     <input type="text"  value="" />     <input type="button" value="刷新" onclick="window.location.reload();" />     <input type="button"  value="百度" onclick="openBaidu();" /> </body>