/*Returns thenumberof entries in the joint sessionhistory.*/
window .history. length
/*Returns the current state object.*/
window .history. state
/*Goes backorforward the specifiednumberof steps in the joint sessionhistory.A zero delta will reload the current page.If the deltaisout ofrange, does nothing.*/
window .history.go( [ delta ] )
/*Goes back one step in the joint sessionhistory.If thereisnopreviouspage, does nothing.*/
window .history. back()
/*Goes forward one step in the joint sessionhistory.If thereisnonextpage, does nothing.*/
window .history. forward()
/*Pushes the given data onto the sessionhistory, with the given title,and,ifprovidedandnot null, the given URL.*/
window .history. pushState(data, title [url] )
/*Updates the current entry in the sessionhistorytohave the given data, title,and,ifprovidedandnot null, URL.*/
window .history. replaceState(data, title [url] )
history.pushState和history.replaceState，这两个history新增的api，为前端操控浏览器历史栈提供了可能性
/***parameters*@data{object} state对象，这是一个javascript对象，一般是JSON格式的对象
*字面量。
*@title{string} 可以理解为document.title，在这里是作为新页面传入参数的。
*@url{string} 增加或改变的记录，对应的url，可以是相对路径或者绝对路径，
*url的具体格式可以自定。
*/
history.pushState(data, title, url)//向浏览器历史栈中增加一条记录。
history.replaceState(data, title, url)//替换历史栈中的当前记录。
这两个Api都会操作浏览器的历史栈，而不会引起页面的刷新。不同的是，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。所需的参数相同，在将新的历史记录存入栈后，会把传入的data（即state对象）同时存入，以便以后调用。同时，这俩api都会更新或者覆盖当前浏览器的title和url为对应传入的参数。
来自mozilla有一个应用pushState和replaceState小demo大家可以看一下：
varcurrentPage =5;// prefilled by server！！！！
functiongo(d){ setupPage(currentPage + d); history.pushState(currentPage,document.title,'?x='+ currentPage); }
onpopstate =function(event){ setupPage(event.state); }
functionsetupPage(page){
currentPage = page;
document.title ='Line Game - '+ currentPage;
document.getElementById('coord').textContent = currentPage;
document.links[0].href ='?x='+ (currentPage+1);
document.links[0].textContent ='Advance to '+ (currentPage+1);
document.links[1].href ='?x='+ (currentPage-1);document.links[1].textContent ='retreat to '+ (currentPage-1); }
了解这俩api还不够，再来看下上边的demo中涉及到的popstate事件，我担心解释的不到位，所以看看mozilla官方文档的解释：
An eventhandlerforthe popstateeventonthe window.A popstateeventisdispatchedtothe window everytimethe active history entry changesbetweentwo history entriesforthe same document.Ifthe history entry being activated was createdbyacalltohistory.pushState()orwas affectedbyacalltohistory.replaceState(), the popstateevent's state property contains a copy of the history entry's state object.Note that justcallinghistory.pushState()orhistory.replaceState() won't trigger apopstate event. The popstate event is only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.Syntax
window.onpopstate = funcRef; //funcRef is ahandlerfunction.
简而言之，就是说当同一个页面在历史记录间切换时，就会产生popstate事件。正常情况下，如果用户点击后退按钮或者开发者调用：history.back() or history.go()，页面根本就没有处理事件的机会，因为这些操作会使得页面reload。所以popstate只在不会让浏览器页面刷新的历史记录之间切换才能触发，这些历史记录一般由pushState/replaceState或者是由hash锚点等操作产生。并且在事件的句柄中可以访问state对象的引用副本！而且单纯的调用pushState/replaceState并不会触发popstate事件。页面初次加载时，知否会主动触发popstate事件，不同的浏览器实现也不一样。下边是官方的一个demo：
window.onpopstate =function(event) {
alert("location: "+ document.location +", state: "+ JSON.stringify(event.state));
};
history.pushState({page:1},"title 1","?page=1");
history.pushState({page:2},"title 2","?page=2");
history.replaceState({page:3},"title 3","?page=3");
history.back(); // alerts"location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts"location: http://example.com/example.html, state: null
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
H5还新增了一个hashchange事件，也是很有用途的一个新事件：
(function(window){// 如果浏览器不支持原生实现的事件，则开始模拟，否则退出。
if("onhashchange"inwindow.document.body ) {return; }
var location =window.location, oldURL = location.href, oldHash = location.hash;// 每隔100ms检查hash是否发生变化
setInterval(function(){
varnewURL = location.href, newHash = location.hash;// hash发生变化且全局注册有onhashchange方法（这个名字是为了和模拟的事件名保持统一）；
if( newHash != oldHash &&typeofwindow.onhashchange ==="function") {// 执行方法
window.onhashchange({type:"hashchange",oldURL: oldURL,newURL: newURL });
oldURL = newURL; oldHash = newHash; } },100);})(window);
更多 --->
网友评论