Detailed explanation of HTML5's pushstate and popstate operation history to change the current url code example without refreshing

This article mainly introduces the pushstate and popstate operation history of HTML5, and the relevant information about changing the current url without refreshing. Friends who need it can refer to it

1. Understanding window.history

window.history represents the history of the window object, which is actively generated by the user and accepts javascript scripts Control the global object. The window object provides access to the browser history through the history object. It exposes some very useful methods and properties, allowing you to freely move forward and backward in 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 the browser's 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 history of the current session by specifying a numeric value relative to the current page position (current page positionindex The value is 0, the previous page is -1, and the next page is 1).

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

 window.history.go(-1);

To move forward one page (equivalent to calling forward()):

window.history.go(1);

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

window.history.length;

2. Modify the history record points

HTML5’s new API extends window.history to make the history recording point 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 historical record point

The storage method is similar to the stacking of array(Array.push()), add a new historical record point in window.history, 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 page The url address 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 the window The effect of adding a new historical record point in .history 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

of the URL will be ignored. The hash part is to monitor the hash part of the URL. HTML5 has a new API called onhashchange. My blog also talks about this method and cross-browser compatible solutions. You can use window.onpopstate to monitor changes in the URL 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 that the execution of window.history.pushState and window.history.replaceState by javascript script 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.

The above is the detailed content of Detailed explanation of HTML5's pushstate and popstate operation history to change the current url code example without refreshing. For more information, please follow other related articles on the PHP Chinese website!