Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve no refresh modification of URL in HTML5, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Preface

In doing a vue search function, you need to jump from the search results page to the details page, and then click back to return to the results page just now. If you only use window.history.go (- 1) to refresh the search page, of course it won't work.

I tried two ways to modify url:

_ window.location.href, splice a search key value, click search at the same time, refresh the page, url has changed, the function is realized, but bug comes. Search page flashes before entering the results page, and the combination of not jumping to the page will not flash, so when the page refreshes, the vue instance will be reloaded.

# in _ window.location.hash,url is a location in a web page, and when you read this url, the page automatically scrolls to the anchor point. This method does not send a request to the server and does not reload the page. Can read and write. When reading, it can be used to determine whether the state of the web page has changed; when writing, it will create an access history without reloading the web page.

New API

Baidu later found that HTML5 introduced two new api methods for window.history objects: history.pushState () and history.replaceState (), which can add and modify history entries, respectively. These methods are usually used with the _ window.onpopstate event. Both api can change the current url, except that pushState creates a new history in the browser, while history.replaceState simply replaces the current address with the specified url.

The new history API of HTML5 can realize the link of changing address bar without refresh, and it is completely possible to jump without refresh with AJAX. They are so useful that they can change the URL without having to refresh the page, a feature that was later used in single-page applications such as vue-router,react-router-dom. So here's how to use the new API.

PushState method

The set of API mentioned above provides a way to "manipulate" browser history.

We can think of browser history as a stack. Stack is a last-in-first-out structure, which can be thought of as a pile of plates. Every time a user clicks on a new web page, a new plate will be added to it, called "into the stack". Every time the user clicks the "back" button, the top plate is removed, which is called "out of the stack". And each time the browser displays the contents of the top plate.

Syntax: window.history.pushState (state, title, url)

After executing the pushState function, a new record is created in the browser's history and the address content of the address bar is changed. It can receive three parameters, which are in grammatical order:

A state object or string that describes some of the properties of the new record. This parameter is added to the history for later use. This parameter is freely given by developers according to their own needs. This value is the parameter of the current page that can be obtained later through history.state;.

A string that represents the title of the new page. Currently, almost all browsers ignore this parameter.

A string that represents the relative address of the new page. (must be in the same domain as the current page. )

Simple example: suppose the current page opens the console for renfei.org/, and executes the following JavaScript statement:

Window.history.pushState ({id: 1 profile1 name: "profile1"}, "My Profile", "/ profile/"); / / the first and second parameters can be ignored and set to null

After that, the address of the address bar becomes renfei.org/profile/, but at the same time the browser does not refresh the page or even detect the existence of the target page.

ReplaceState method

Sometimes you want to replace the current record instead of adding a new one. The difference between the two is that replaceState () modifies the current history entry instead of creating a new one.

ReplaceState is the same as the pushState principle, and the most common method is:

Window.history.replaceState ({id: 1 profile name: "profile"}, 'download', 'download?id=1')

Features: replaceState will not be added to the history, using history.go (- 1) will skip the current page equivalent to history.go (- 2).

Popstate event

When a page loads, it may have a non-empty state object. This may happen when the user restarts the browser after the page sets up a state object (using pushState or replaceState). When the page reloads, the page will receive an onload event, but there will be no popstate event. However, if you read the history.state property, you will get the state object after the popstate event:

Var currentState = history.state; / / get the state object parameter value of the history.pushState of the current page setup

Calling history.pushState () or history.replaceState () does not trigger the popstate event. The popstate event is triggered only under certain browser behaviors, such as clicking the back and forward buttons (or calling the history.back (), history.forward (), history.go () methods in JavaScript).

Example: suppose the current page address is http://example.com/index.html

_ window.onpopstate = function (event) {alert ("location:" + _ document.location.href + ", state:" + JSON.stringify (event.state)); / / get the history.state object value}; / / bind the event handler. History.pushState ({page: 1}, "title 1", "? page=100"); / / add and activate a history entry http://example.com/index.html?page=100, entry index is 1 / / history.state is {page: 1} history.pushState ({page: 2}, "title 2", "? page=200") / / add and activate a history entry http://example.com/index.html?page=200, entry index is 2history.replaceState ({page: 3}, "title 3", "? page=300"); / / modify the active history entry http://ex..?page=200 on the current page to change the http://ex..?page=300, entry index to 3history.back () / / pop-up "location: http://example.com/index.html?page=100, state: {" page ": 1}" history.back (); / / pop-up "location: http://example.com/index.html, state: nullhistory.go (2); / / pop-up" location: http://example.com/index.html?page=300, state: {"page": 3}

The difference between pushState method and setting hash value

In a sense, calling pushState () is similar to setting _ window.location = "# foo", both of which create and activate a new history on the current page. But pushState () has the following advantages:

The new URL can be any URL of the same origin as the current URL. Set _ window.location to keep the same file only if you only change the hash value. If necessary, you can create a history without changing the URL. Set _ window.location.hash = "# foo"; a new history entry is created only if the current hash is not # foo. We can associate arbitrary data for new history items. Based on the hash value, all relevant data must be encoded into a short string.

It should be noted that the URL address of the web page is modified through history.pushState, and the interaction between single page and multi-interface can be realized by hiding the corresponding interface with the relevant code. This method has the advantages of faster speed, higher execution efficiency and better UI experience than directly accessing the URL address, but it will increase the complexity and coupling of the page. It depends on the actual situation and is generally used on dialog pop-up boxes.

Application: site-wide AJAX, and enables browsers to crawl AJAX pages

What can this do? One of the more common scenarios is to cooperate with AJAX.

Assuming that there are several navigation links on the left side of a page, content on the right side, and only the content on the right side needs to be updated when navigating, it is undoubtedly a waste to refresh the entire page. At this point, we can use AJAX to pull the data on the right. But if only this, the address bar will not change, users can not forward, backward, can not collect the current page or share the current page with others; it is also difficult for search engines to crawl. At this point, you can use HTML5's History API to solve this problem.

Idea: bind the click event first. When a user clicks a link, prevent the default behavior (page jump) through the preventDefault function, read the address of the link (if there is jQuery, it can be written as $(this) .attr ('href')), insert this address into the browser history through pushState, and then use AJAX technology to pull (if there is a jQuery, you can use the $.get method) to pull the real content in this address, while replacing the content of the current web page.

To handle users moving forward and backward, we listen for popstate events. When the user clicks the forward or back button, the browser address is automatically converted to the corresponding address, and the popstate event occurs. In the event handler, we grab the corresponding content according to the current address, and then use AJAX to pull the real content of the address, present it, and then do so.

Finally, the whole process will not change the page title, you can change the page title by directly assigning a value to the document.title.

The above is all the contents of the article "how to achieve non-refresh and modify URL in HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.