H5 history API

Original link: https://www.kai666666.com/2023/04/18/H5-history-API/

For the history object in JS, the three methods we most commonly use are back() , forward() , and go() . H5 has added pushState() and replaceState() to update the URL address without refreshing the page, as mentioned in this chapter The H5 history API also refers to these two methods.

For H5 history API browser compatibility , please see here .

PS: Although H5 is nothing new, there is no harm in learning.

pushState

According to the API, pushState means to add a state to the history stack of the browser. This function is originally used to add the state, and the additional ability is to modify the URL, so the first parameter is the state, and the last parameter is the URL. URL It is optional. If you do not write the URL, the URL will not change, but a piece of data will still be added to the history stack. Clicking the back button of the browser will pop this history information from the stack, which is equivalent to returning the page to its original state. The content of the page has not changed. Its signature is as follows:

 1

 history. pushState (state, title[, url])

The first parameter of pushState is the state. This state state can be any type that can be copied in a structured manner . It is no problem to pass objects, numbers, and Booleans. The second is the title, but the browser does not care about it at all, and you will not modify the browser title if you set it, so we generally pass in null . The third is the URL, which is usually a string. The new version of the browser also supports the URL object ( new URL() ), but considering compatibility, it is better to use a string. It should be noted that the URL must be It has the same origin as the current page address.

Let’s look at a simple example:

 1
 2
 3
 4
 5
 6
 7

 const state = {
 msg : 'I am status'
 };

 history. pushState (state, null , '/a' );

 console . log (history. state ); // print state ie { msg: 'I am the state' }

The above state is an object. Calling pushState will add a piece of information to the history stack, and at the same time modify the pathName of the URL to /a . If the value of the above state is changed to 123 , then history.state becomes 123 after calling pushState. But it should be noted that history.state !== state , here a structured deep copy is used, which is equivalent to calling structuredClone(state) , structured deep copy can not only copy the basic type, but also the object can be successfully copied if there is a circular reference Yes, it is safer than JSON.parse(JSON.stringify(state)) . The browser’s native structuredClone method is currently not compatible enough, and its related content can be found here . Of course, structured deep copy is not a panacea. For DOM nodes, error objects, and function functions, copying will also fail. When the above-mentioned stete passes these types of values, an error will be reported.

The third parameter URL can be divided into these situations. For example, the current path is https://www.kai666666.com/2023/04/18/H5-history-API/?1=1#more (here for convenience Check the search situation, add a 1=1 parameter).

There are a few things to note here. First of all, whether there is / in the last digit of the address will affect the judgment of the current path and the upper level path. If there is / , the current path is considered to be the path after the slash, although the latter is empty. For example URL https://www.kai666666.com/2023/04/18/H5-history-API/ and https://www.kai666666.com/2023/04/18/H5-history-API call history.pushState(state, null, './a'); The results are https://www.kai666666.com/2023/04/18/H5-history-API/a and https://www.kai666666.com/2023/04/18/a .

The second point to note is that the path starting with / will replace the search and hash parts; the path starting with ? will also replace the hash part, if you need to keep it, you need to manually add the corresponding part, such as `/a$ {location.search}${location.hash}`.

The current path and the previous path can also be mixed:

 1
 2

 history. pushState ( null , null , './a/../b/c' );
 // Change the path to https://www.kai666666.com/2023/04/18/H5-history-API/b/c

By the way, only ./ or ../ in the URL path can omit the following / .

 1
 2

 history. pushState ( null , null , '..' );
 // Replace the path to the upper level directory and modify it to https://www.kai666666.com/2023/04/18/

Finally, if the URL contains Chinese, the content obtained by calling location.pathname is the transcoded content.

 1
 2

 history. pushState ( null , null , '/Hello' );
 console.log ( location.pathname ) // /%E4%BD%A0%E5%A5%BD 

replaceState

The usage of replaceState and pushState is exactly the same, the difference is that replaceState replaces the current history stack, while pushState adds a history stack, which causes the return button of replaceState to return to the previous history stack. The signature of replaceState is as follows:

 1

 history.replaceState (stateObj, title[, url]); 

The influence of the base element on the path

The base element in HTML provides the basic path. If base is set, the relative path is calculated based on the path in the base element to calculate the new path.

 1

 < base href = "/base/aaa" >

After adding the above base element, the result of the above situation is as follows:

popstate event

The popstate event is triggered when the browser history stack returns or moves forward. The popstate event is not triggered when history.pushState() and history.replaceState() methods are called, only the hash is changed or these two functions are called and click to browse It will only be triggered when the browser moves forward/backward or using JS API forward/backward (such as calling history.back() , history.go(-1) or history.forward() ).

 1
 2
 3

 window . addEventListener ( 'popstate' , ( event ) => {
 console . log (event. state ); // Here you can get the status
 })

If the hash is not modified or the two functions are not called, the page will be refreshed when going forward and back directly, and the event callback function will not be triggered. Of course, you can also manually trigger the popstate event.

 1

 window . dispatchEvent ( new PopStateEvent ( 'popstate' ));

This article is transferred from: https://www.kai666666.com/2023/04/18/H5-history-API/
This site is only for collection, and the copyright belongs to the original author.