HTML5教程 | HTML5 History API

HTML5 History API允许页面使用Javascript来处理浏览器的导航历史。HTML5 history API对于单个页面的WEB APP应用程序十分有用。在单个页面的WEB APP应用程序中我们可以使用HTML5 history API来制作类似于“书签”的导航效果。

浏览器的浏览历史

浏览器的浏览历史是一个栈结构的URL组。每当用户浏览了一个网站，新页面的URL就会被放置到这个栈的顶部，当用户点击了浏览器的“后退”按钮，那么栈的指针就会移动到当前指向的栈元素的后一个元素。如果用户点击了浏览器的“前进”按钮，那么栈的指针就会移动到当前指向的栈元素的前一个元素。如果用户点击了一个“后退”按钮后，在浏览了一个新的页面，栈顶元素D的URL会被新的URL覆盖。

下面是一个浏览历史栈的例子：

http://myapp.com/great-new-story.html
http://myapp.com/news.html
http://myapp.com                              
                            

在上面的浏览历史栈中，最后浏览的是“http://myapp.com/great-new-story.html”。如果用户点击了浏览器的“后退”按钮，那么栈的指针会移动到“http://myapp.com/news.html”页面。这时如果用户在点击浏览器的“前进”按钮，那么指针又会移动到“http://myapp.com/great-new-story.html”页面。但是如果用户在这时的操作时打开另一个新的页面，那么新的页面的URL就会覆盖“http://myapp.com/news.html”这条记录。

HTML5 History API安全限制

HTML5 history API仅能够在与当前页面相同域名下的其它页面访问浏览器的浏览历史。这时处于安全方面的考虑。因此，一个WEB页面是不能够看到用户浏览的其他网站的浏览历史记录的。

同样，HTML5 history API也不允许将用户访问的其它页面的URL放入到当前域名的浏览器历史栈中。

HTML5 history对象

我们可以通过history对象来访问浏览器的浏览历史，这个对象是一个JavaScript全局对象（window.history）。

history对象包含下面的一些函数-它们包含了history API：

• back()
• forward()
• go(index)
• pushState(stateObject, title, url
• replaceState(stateObject, title, url)

back()函数用于移动浏览历史到前一条URL。调用back()函数和点击浏览器的“后退”按钮的效果相同。

forward()函数用于移动浏览历史到下一条URL。调用forward()函数和点击浏览器的“前进”按钮的效果相同。该函数只有在back()函数已经被调用，或“后退”按钮被点击之后才有效。如果浏览记录指针已经位于浏览历史的最后一条URL上，该函数不会有任何作用。

go(index)函数会根据参数index的值来向前或向后移动浏览历史。如果参数index是一个负数，例如-1，浏览器会向后移动浏览记录。如果参数index是一个正数，例如1，那么浏览器会向前移动浏览记录。index数值的大小表明要向前或向后移动多少个页面。

pushState(stateObject, title, url)函数会在浏览历史栈中压入一条新的URL。这个函数有3个参数：url是要压入栈的URL，title会被大多数浏览器忽略，stateObject是当一个新的URL被压入历史栈时随事件传入的对象。这个对象包含你需要的任何数据。

replaceState(stateObject, title, url)函数与pushState()函数类似，但是它会将历史栈中的当前元素替换为一个新的URL。当前元素不一定是栈顶元素，它是当前指针指向的元素。

History API示例

下面将列举一些HTML5 history API的应用例子。

back()和forward()

先来看看如何通过back()和forward()函数来移动浏览历史。

history.back();

history.forward();                              
                            

history对象是window对象中的一个子对象，所以上面的代码也可以写为：

window.history.back();

window.history.forward();                              
                            

需要注意的是，除非你已经向后移动了浏览历史，否则forward()函数是不可用的。

go()

项目来看看如何使用go()函数来达到与back()和forward()函数相同的效果。如果想浏览历史后退一步，可以使用：

history.go(-1);                              
                            

如果想后退2个页面，可以使用：

history.go(-2);

类似的，如果想向前移动浏览历史，只要将参数的数值设置为正数即可。

history.go(1);

history.go(2);                              
                            

pushState()

要在浏览历史栈中压入一个新的浏览状态，可以使用history对象的pushState()函数。

var state = {};
var title = "";
var url   = "next-page.html";

history.pushState(state, title, url);                              
                            

上面的代码在浏览历史栈中压入了一条新的URL。这个操作同时还会改变浏览器地址栏上的URL地址，但是不会使浏览器跳转到这个新的URL上。

replaceState()

replaceState()函数会替换当前栈指针指向的浏览历史元素。这个元素不一定是栈顶元素。

var state = {};
var title = "";
var url   = "another-page.html";

history.replaceState(state, title, url);                              
                            

这个操作同时还会改变浏览器地址栏上的URL地址，但是不会使浏览器跳转到这个新的URL上。

History Change事件

HTML5 history API允许我们监听一个页面浏览历史的改变。HTML5 history API的安全机制在这里同样有效，所以我们不能够监听到不同域名下的页面的改变历史。

要监听浏览器浏览历史的改变，可以使用window对象的onpopstate()事件监听。下面是一个示例代码：

window.onpopstate = function(event) {
    console.log("history changed to: " + document.location.href);
}                              
                            

onpopstate事件处理函数会在相同页面中每次浏览历史改变的时候被调用。

注意，只有在点击了浏览器的“前进”和“后退”按钮，会执行正确的的浏览历史导航函数back()，forward()和go()时，onpopstate事件才会被调用。而调用pushState()和replaceState()函数不会触发onpopstate事件。

返回HTML5教程目录