Detailed introduction to the usage examples of history.pushState() in h5

In HTML files, the history.pushState() method adds astateto the browser history.

pushState() takes three parameters:a state object, a title (now ignored), and an optional URL address. These three parameters will be examined in detail below:

state object—The state object is a JS object created by the pushState() method and related to the history record. When the user is directed to a new state, the popstate event is triggered. The event's state property contains the history's state object. (Translator's Note: In short, it stores JSON strings and can be used in popstate events.) The state object can be anything that can be serialized. Since Firefox will store these objects on the user's disk, so these state objects will be restored after the user restarts the browser, we impose a maximum string size of 640k on the serialized representation of the state object. If you pass a state object with a serialized representation greater than 640k to the pushState() method, this method will throw an exception. If you need more space, it is recommended to use sessionStorage or localStorage.

title— This parameter is now ignored by Firefox and may be used in the future. To allow for possible future changes, it is safe to pass an empty string. Of course, you can pass a short title for the state you want to transition to. (Translator's Note: Most browsers now do not support or ignore this parameter. It is best to use null instead)

URL- This parameter provides the address of the new historical record. Please note that the browser will not load this URL after calling the pushState() method, but it may do so later, such as after the user restarts the browser. The new URL does not have to be an absolute address; if it is relative, it must be relative to the current URL. The new URL must be under the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional. If it is not specified, it will be set to the current URL of the document.

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) to Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), transferred objects are serialized using JSON. Starting with Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the object is serialized using the structured clone algorithm. This will allow a more diverse object to be transferred.

In some cases, calling pushState is equivalent to setting window.location = "#foo". In this case, both actions will create and activate another history record related to the current page.

But pushState() has other advantages:

The new URL can be any address under the same origin of the current URL. On the contrary, setting window.location will keep you on the same page unless you only change thehash.

If not necessary, you can not change the URL. Instead, set window.location Set to "#foo"; will only create a new history record if the current hash is not #foo.

You can associate arbitrary data with yournewhistory entry. With the hash-based approach, you need to encodeallof the relevant data into a shortstring. You can associate any data into your new history record. Using a hash-based approach, you encode all relevant data into a short string.

Please note that the pushState() method will never cause the hashchange event to be activated, even if the new URL is different from the old one only in hash.

In XUL, it creates a special XUL element.

In other documents, an empty URInamespacewill be created.

SyntaxEDIT

history.pushState(state, title, url);

Sample EDIT

Created A new browser history set by state, title, and url.

JavaScript

var state = { 'page_id': 1, 'user_id': 5 }; var title = 'Hello World';var url = 'hello-world.html'; history.pushState(state, title, url);

【相关推荐】

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

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

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

4.深入了解h5中history特性--pushState、replaceState

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

The above is the detailed content of Detailed introduction to the usage examples of history.pushState() in h5. For more information, please follow other related articles on the PHP Chinese website!