Methods for pushstate and popstate to operate URLs

This time I will bring you the methods of operating URLs with pushstate and popstate. What are the precautions for operating URLs with pushstate and popstate. The following is a practical case. Let’s take a look.

1. Understanding window.history

window.history represents the history of the

window object, which is initiated by the user Generates and accepts global objects controlled by javascript scripts. The window object provides access to the browser history through the history object. It exposes some very useful methods and properties that allow you to move forward and backward freely in the history.

1. Forward and Backward in History

To go back in history, you can do this:

window.history.back();

This is like the user clicking on the browser Same as the back button.

Similarly, you can move forward, just like clicking the forward button in the browser, like this:

 window.history.forward();

2. Move to the specified history point

You can use the go() method to load a page from the current session's history by specifying a value relative to the current page position (the current page position

index value is 0, and the previous page is - 1, the next page is 1).

To go back one page (equivalent to calling back()):

 window.history.go(-1);

Move one page forward (equivalent to calling forward()):

window.history.go(1);

Similarly, By passing parameter "2", you can move forward 2 record points. You can check the length attribute value to find out how many recording points there are in the history stack:

window.history.length;

2. Modify the history recording points

HTML5's new API extends window.history, making history points more open. You can store the current historical record point, replace the current historical record point, and monitor the historical record point. The following is a brief description of each one.

1. Store the current history point

The storage method is similar to the push of the array (Array.push()), add a new one in window.history Historical record points, for example:

// 当前的url为：http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页面标题：目前所有浏览器都不支持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

After executing the pushState method, the url address of the page is http://qianduanblog.com/post-1.html.

2. Replace the current history point

window.history.replaceState is similar to window.history.pushState. The difference is that replaceState will not be in window.history The effect of adding a new historical record point is similar to window.location.replace(url), which will not add a new record point to the historical record point. The replaceState() method is particularly appropriate when you want to update the state object or URL of the current history entry in response to some user action.

3. Monitoring historical record points

Monitoring historical record points can be intuitively considered as monitoring URL changes, but the hash part of the URL will be ignored. For the hash part, HTML5 has a new API called onhashchange. This method and cross-browser compatible solutions are also mentioned in my blog. You can monitor changes in the URL through window.onpopstate, and obtain the status object stored at the historical record point, which is the json object mentioned above, such as:

// 当前的url为：http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到：http://qianduanblog.com/index.html
    // 获得的json为null
    // 再点击一次前进到：http://qianduanblog.com/post-1.html
    // 获得json为{time:1369647895656}
}

It is worth noting: javascript script Executing window.history.pushState and window.history.replaceState will not trigger the onpopstate event.

Another thing to note is that Google Chrome and

Firefox react differently when the page is first opened. Google Chrome strangely triggers the onpopstate event, while Firefox doesn't.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to change the code of the current url without refreshing

How to use H5’s LocalStorage locally Store refresh value

The above is the detailed content of Methods for pushstate and popstate to operate URLs. For more information, please follow other related articles on the PHP Chinese website!