操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

一、历史记录前进与后退

1.后退：

window.history.back() -- 相当于用户在浏览器的工具栏上点击返回按钮；

2.前进：

window.history.forward() -- 相当于用户在浏览器的工具栏上点击前进按钮；

3.移动到指定历史记录点：

通过go()方法，指定一个相对于当前页面位置的数值，从当前会话的历史记录中加载页面（当前位置页面索引：0，上一页：-1，下一页：1）；

window.history.go(-2)--后退2页，相当于调用两次back();

window.history.go(1)--前进1页，相当于调用forward();

*可以通过window.history.length，得到历史记录栈中一共有多少页。

二、添加/修改历史记录条目

1.pushState(stateObject,title,URL):

逐条添加历史记录条目，

a.状态对象（stateObject）--一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝；（ps:FireFox浏览器强行限制状态对象的大小为640k，超出则抛异常，可通过sessionStorage或localStorage存储大的数据）

b.标题（title）--传入一个简短的标题，标明将要进入的状态；（FireFox浏览器目前会忽略该参数，但是传一个空字符串会比较安全）

c.地址（URL）--新的历史记录条目的地址（可选，不指定的话则为文档当前URL）；浏览器不会在调用pushState()方法后加载该地址；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。

*某种意义上，调用pushState()有点类似于设置window.location='#foo'，它们都会在当前文档内创建和激活新的历史记录条目。

（拓展：window.location--待研究）

2.replaceState():

history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

3.popstate():

每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

读取当前状态：

如果页面中使用pushState()或replaceState()方法设置了一个状态对象，然后用户重启了浏览器。当页面重新加载时，页面会触发onload事件，但不会触发popstate事件。可以使用history.state直接读取当前历史记录条目的状态，而不需要等待popstate事件。

调用history.pushState()或者history.replaceState()不会触发popstate事件.pushState事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法)。

调用方法:

window.onpopstate = function(event) {//做一些操作event.state; //  当前历史记录条目的状态
};

或者：

window.addEventListener('popstate', function(event) {//做一些操作
});

操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）相关推荐

popstate_操纵浏览器历史记录--popstate() history.pushState()
一.历史记录前进与后退 1.后退: window.history.back()--相当于用户在浏览器的工具栏上点击返回按钮: 2.前进: window.history.forward()--相当于用户 ...
HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录
一.popstate用来做什么的? 简而言之就是HTML5新增的用来控制浏览器历史记录的api. 二.过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和sta ...
popstate_图解用HTML5的popstate如何玩转浏览器历史记录
一.popstate用来做什么的? 简而言之就是HTML5新增的用来控制浏览器历史记录的api. 二.过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和sta ...
利用popstate事件和window下的history对象处理浏览器跳转问题
引子之前,偶尔在项目中用过history接口做返回上一页功能,当时是用的history.go(-1),前几天面试中遇到一个控制浏览器跳转的问题时有点懵,特意查了文档记录一下,并且列出一些目前能想到的 ...
用history api偷换浏览器历史记录
HTML5提供了新的history接口,例如pushstate,以及popstate.通常情况下,浏览器的历史记录能保存访问历史,但是因为有了history api,pushstate和replace ...
window.history.pushState()和window.history.replaceState()
今天在项目中遇到要实现修改地址栏但是页面不可以刷新的需求查阅资料发现可以用window.history.pushState(state, title, url)和window.history.re ...
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如 ...
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
「无刷新跳转」window.history两个新方法pushState和replaceState详解
无跳转重写url HTML5新接口,可以改变网址而不刷新页面存在跨域问题,不支持重写到另一个域名下仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面一.window.h ...

操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）

操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）相关推荐

最新文章

热门文章