在JS中你所应该知道的History Object

　　近来手头一项目，大量用到history对象，故此结合自身的应用对些对象做一个小结。

　　http://nextlevel.msn.com/artist/russellsimmons/episode,当你在modern browser中往下拖动scroll bar的时候，你会发现address bar中的内容是相应做出改变的，会换成相应的section名字，如biography, timeline, articles.你会发现页面并没有刷新，那browser会如何做出这种行为的呢，我在前面中所提到到的是modrn browser，我想你心内也许会有一想法，是不是html5的内容呢，诚如你所料，真的是html5所提供的新东西，既然是html5的内容和这篇文章的标题有何关联呢？其实它是在history对象中添加了一个新的方法， pushState().

　　可能又有同学会问，IE中是否会支持此方法，很遗憾，微软秉承了它一贯的让开发人员相当有存在感的优良传统，它是不支持的，你必须去用别的方法来兼容它。这里还有一关键，那就是要页面不刷新，所以我们用到了IE中的hashObject，如下所示http://nextlevel.msn.com/artist/russellsimmons#episode，至于是如何兼容这两种方式的，以至于我们在两类浏览器中如何都可以浏览，这是另外一个话题，我并不想在此展开。闲话少讲，让我们来切入主题。

History是什么?

DOM中的window对象提供了一个可以访问浏览器历史的一个对象，那就是我们今天的主角history。它提供了一系列的方法和属性来完成它的使命，我也会在下面来展开。同时在HTML5中你也可以来领略一下它是如何来操作history栈的。

乐游History

如何完成浏览器中的页面切换内，我们有back(), forward()和go()方法，至于它们是干什么的？望名生义，我想你也会猜到的。

 向前走，向后走

window.history.back()

　　这种方式就像你在浏览器上点击"back"按钮一样， 同样的如果你想向前走，也就是回到原来的页面，下面的方法，我想会是有用的。　

window.history.forward()

移动到特定的页面

go()就是为它而生的，你可以利用它来load一个特定的页面,当然这个页面是当前的session history中所有存在的，而它所需要的参数就是一个相对于整个历史记录的位置数(从当前的页面开始，它自己的index就是0)

回到前一个页面（相当于back())

window.history.go(-1)

向前一个页面相当于(forward())

window.history.go(1)

同样的，你可以向前两个页面，通过调用window.history.go(2),当然为了对history对象中有多少页面，你可以调用以下方法来得到正确的页面数。

var numberOfEntries=window.history.length;

Note:IE 支持你可以传入URLS当做go的参数，不过，这不是一个通用的方法，请慎用。

如何在history中添加和改变条目

 HTML5为我们引入了history.pushState()和history.replaceState()方法，它们允许你添加和改变其中的条目。这些方法只所以能完成它的使命，这里有一个幕后的英雄，window.onpopstate事件，我将在后面来介绍它。

我们用history.pushState()来改变state，我们将会得到一个页面的引用reffer，它是用XMLHttpRequest()所创建的Http header中所用到的对页面的引用.

上例子：

假设有一个地址http://localhost/foo.html 如何我们引用下列代码，将会有什么结果

var stateObj={foo:"bar"};
history.pushState(stateObj,"page 2", "bar.html");

我们将会在地址栏中显示http://localhost/bar.html,但是请注意这不会浏览器加载bar.html，甚至它不会去检查bar.html是否存在。

　　假设现在用户跳到http://google.com,然后我们按下back按钮。现在的URL bar将显示http://localhost/bar.html,现在的page将会得到一个popstate事件，它的state object将会包含一个stateObj的copy.这个page看起来像是foo.html，尽管page将会改变它的内容，在popstate事件中。

　　如果我们再次按下back按钮，这次它会真的改成http://localhost/foo.html，这次document也会得到一个popstate event，但是得到的state object将会是null.当然，这次back不会改变document中的内容，我们在前面的back中所得到的内容。当然，如果你想，你可以在popstate event来改变内容。

让我们来细看一下pushState()

pushState()将会接收3个参数: state object,title(它现在是不起作用的），URL(optionally).

state object--正如你在前面所看到的，它是一个javascript object {},我们用pushState()来增加entry的时候，它会和这个entry相依为命。当user在页面之间切换时，它会触发popstate event. 而event.state会包含entry的state object的一个copy

title--你懂的，不过，这个东西现在还用不到。

URL--在历史记录中会添加一个新的条目。

 

从作用上来看，pushState()和设置window.location="#foo"是一致的，这两种方式都会创建和激活另一个和当前页面相关的history entry,但是它有以下优势：

1. 新的URL可以是任意的URL和当前页面在同一个域中的。而window.location只能在一个document.

2.你不必改变你不想要的URL.

3.你可以填充任意data和你的history entry产生关联，而hash-based方法，你必须编码。 

转载于:https://www.cnblogs.com/moonreplace/archive/2012/06/23/2559392.html