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

The

window object in DOM provides reading of browser history through the window.history method, allowing you to Go forward and backward in the access history.

Starting from HTML5, we can start manipulating this history stack.

1.History

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

##Forward and backward

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();

Move to a specific position in the history

You can use the go() method to load a specific page from the session history.

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's length property.

var numberOfEntries = window.history.length;

Note:IESupport to go( ) method passes URL parameters. ##2. Add and modify history entities

Since

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

HTML5

The two methods histtory.pushState() and history.replaceState() are introduced, which allow adding and modifying history entities. At the same time, these methods will work with the window.onpostate event.

使用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, URL will become http://mozilla.org/foo.html, document will Get another popstate event and a state object that is null. This return action does not change the content of the document. (Maybe try to load ...chrome after a while)

#pushState method

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

·      stateObject – The state object is a JavaScript object, which is related to the pushState() method created New history entity. Used to store information about the entry you want to insert into the history record. State object can be any Jsonstring. Because firefox will use the user's hard disk to access the state object, the maximum storage space of this object is 640k. If it is greater than this number value, the pushState() 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 represent state

·           URL—This parameter is used to pass the URL of the new history entity. Note that the browser will not This URL will be loaded after calling the pushState() method. But maybe it will try to load this URL after a while. For example, after the user restarts the browser, the new url may not be an absolute path. If it is a relative path, it will be relative to the existing url. The new url must be in the same domain as the existing url, otherwise pushState() will throw an exception. This parameter is optional. If it is empty, it will be set to the current url of document.

#In a sense, calling the pushState() method is very similar to setting window.location = "#foo",Both of which will create and activate another association to the history entity of the current document, but pushState() also has some advantages:

##l

The new url can be any and the current urlurl of the same domain, in contrast, if you only set hash, window.location will remain in the same document. #l

If not needed, you don’t need to modify

url. In contrast, setting window.location = "#foo"; only produces new history entities if your current hash is not #foo

l You can associate any data with your new history entity. Using a hash based approach, all relevant data needs to be encoded into a short string.

##Note that the pushState() method does not cause hashchange time Happens, even if the old and new url are just hash different.

#replaceState() method

history.replaceState()

It is similar to pushState(), except that replaceState() is used to modify the current history entity instead of Create a new one. This method is sometimes useful. You can use it when you need to update a state object or the current history entity in response to certain user actions. Update the state object or the url of the current history entity. #popstate event

When the

history

entity is changed, popstate The event will occur. If the history entity is generated by the pushState and replaceState methods, the state attribute of the popstate event will contain a A copy of the state object from the history entity#See window.onpopstate

## for details

#

读取当前的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!