浏览器前进后退研究.docVIP

知识准备 1.1浏览器对象 1.2浏览器对象分层结构 History 对象 1）html4中的方法 2）在HTML5中又添加了两个方法： pushState(data, titleurl) replaceState(data, title, url) History 实现原理 看了一些关于浏览器history实现前进后退功能的资料后，总结如下： history对象的存储结构与栈相同，先进后出。history对象会记录url,点击前进或者后退按钮都会从对象中取出url. History 实现方式 3.1 一般请求 1) 不需要做特殊处理，直接利用 浏览器 前进、后退 ?history.go(), ?history.back(), history.forward(), history.length方法做处理。 XmlHttpRequest（Ajax）请求 支持onhashchange事件的，通过更新和读取location.hash的方式来实现/meteoric_cry/archive/2011/01/11/1933164.html) 通过内嵌一个iframe来模拟实现页面的前进后退，通过iframe的onload事件来实现/post/how-to-control-browser-history.html) HTML5 API，支持HTML5 浏览器。 (/meteoric_cry/archive/2011/06/03/2070235.html) 第三方API, 其实现结合了 1），2），3）。兼容性最好 (/browserstate/history.js) 利用第三方API实现 Ajax页面history功能的步骤 4.1引入js script src=${}/scripts/bundled/html4+html5/jquery.history.js/script History API Functions States History.pushState(data,title,url) Pushes a new state to the browser; data can be null or an object, title can be null or a string, url must be a string History.replaceState(data,title,url) Replaces the existing state with a new state to the browser; data can be null or an object, title can be null or a string, url must be a string History.getState() Gets the current state of the browser, returns an object with data, title and url History.getStateByIndex Gets a state by the index History.getCurrentIndex Gets the current index History.getHash() Gets the current hash of the browser Adapter History.Adapter.bind(element,event,callback) A framework independent event binder, you may either use this or your frameworks native event binder. History.Adapter.trigger(element,event) A framework independent event trigger, you may either use this or your frameworks native event trigger. History.Adapter.onDomLoad(callback) A framework independent onDomLoad binder, you may either use this or your frameworks native onDomLoad binder. Navigation History.back() Go back once through the history (same as hitting the browsers back button) History.forward() Go forward on