In-depth understanding of the history features in h5--pushState, replaceState

The

windowobject inDOMprovides reading of browser history through thewindow.historymethod, allowing you to Go forward and backward in the access history.

Starting fromHTML5, we can start manipulating this history stack.

1.History

Useback(),forward(),andgo()The method can go forward and backward in the user's history

Back:

window.history.back();

This method will act as if the user clicked the back key on the browser toolbar.

Similarly, the following method can also be used to generate user forward behavior:

window.history.forward();

You can use thego()method to load a specific page from thesessionhistory.

Move one page backward:

window.history.go(-1);

Move one page forward:

window.history.go(1);

Similarly, you can go forward or back multiple pages.

You can also find the total number of pages in the history stack by checking the browser history'slengthproperty.

var numberOfEntries = window.history.length;

Note:IESupport togo( )method passesURLparameters.##2. Add and modify history entities

Gecko2Start introducing(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

The two methodshisttory.pushState()andhistory.replaceState()are introduced, which allow adding and modifyinghistoryentities. At the same time, these methods will work with thewindow.onpostateevent.

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest时document的URL。

pushState用于向history添加当前页面的记录，而replaceState和pushState的用法完全一样，唯一的区别就是它用于修改当前页面在history中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

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

这种方法将会使url地址栏显示http://mozilla.org/bar.html，但浏览器不会加载bar.html页面，即使这个页面存在也不会加载。

现在再次假设用户继续访问http://google.com，然后点击后退。这时，url地址栏将会，http://mozilla.org/bar.html，页面会得到popstate事件（chrome），这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+

At this time, we click back again,URLwill becomehttp://mozilla.org/foo.html,documentwill Get anotherpopstateevent and astateobject that isnull. This return action does not change the content of the document. (Maybe try to load...chromeafter a while)

#pushState method

pushState()has three parameters:stateObject, title(is now ignored and not processed),URL(optional). details:

·stateObject– The state object is aJavaScript object, which is related to thepushState() method created Newhistory entity. Used to store information about the entry you want to insert into the historyrecord.State object can be anyJsonstring. Becausefirefox will use the user's hard disk to access thestate object, the maximum storage space of this object is640k. If it is greater than this numbervalue, thepushState() method will throw an exception. If you really need more space for storage, use local storage.

title—Firefox now ignores this parameter, although it may be used in the future. The safest way to use it now is to pass an empty string to prevent future modifications. Or you can pass a short title to representstate

·URL—This parameter is used to pass theURL of the newhistory entity. Note that the browser will not ThisURL will be loaded after calling thepushState() method. But maybe it will try to load thisURL after a while. For example, after the user restarts the browser, the newurl may not be an absolute path. If it is a relative path, it will be relative to the existingurl. The newurl must be in the same domain as the existingurl, otherwisepushState() will throw an exception. This parameter is optional. If it is empty, it will be set to the currenturl ofdocument.

#In a sense, calling thepushState()method is very similar to settingwindow.location = "#foo",Both of which will create and activate another association to thehistoryentity of the currentdocument, butpushState()also has some advantages:

The newurlcan be any and the currenturlurlof the same domain, in contrast, if you only sethash,window.locationwill remain in the samedocument.#l

url. In contrast, settingwindow.location = "#foo";only produces newhistoryentities if your currenthashis not#foo

lYou can associate any data with your newhistoryentity. Using ahashbased approach, all relevant data needs to be encoded into a short string.

##Note that thepushState()method does not causehashchangetime Happens, even if the old and newurlare justhashdifferent.

It is similar topushState(), except thatreplaceState()is used to modify the currenthistoryentity instead of Create a new one. This method is sometimes useful. You can use it whenyou need to update astateobject or the currenthistoryentity in response to certain user actions. Update thestateobject or theurlof the currenthistoryentity.#popstate event

When the

entity is changed,popstateThe event will occur. If thehistoryentity is generated by thepushStateandreplaceStatemethods, thestateattribute of thepopstateevent will contain a A copy of thestateobject from thehistoryentity#Seewindow.onpopstate

#

读取当前的state

当页面加载时，它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载，页面将收到onload事件，但不会有popstate事件。然而，如果你读取history.state属性，将在popstate事件发生后得到这个state对象

var currentState = history.state;

Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

【相关推荐】

1.特别推荐：“php程序员工具箱”V0.1版本下载

2.js中的window.history的用法（一）

3.js中的window.history的用法（二）

4.详细介绍h5中的history.pushState()使用实例

5.h5中History API 对Web应用的影响

The above is the detailed content of In-depth understanding of the history features in h5--pushState, replaceState. For more information, please follow other related articles on the PHP Chinese website!