Use JavaScript to modify the implementation code of the browser URL address bar

Use JavaScript to modify the implementation code of the browser URL address bar_javascript skills

WBOY

Release： 2016-05-16 17:19:35

Original

1876 people have browsed it

There is a very interesting feature in current browsers. You can modify the browser URL without refreshing the page; during the browsing process, you can store the browsing history and click Back when you click on the browser. When pressing the button, you can browse the browsing history to get the rollback information. This does not sound complicated and can be implemented. Let's write some code. Let's see how it works.

Copy code The code is as follows:

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History object pushState() This method has 3 parameters, as you can see from the example above. The first parameter is a Json object, which stores any historical information about the current URL. The second parameter, title, is equivalent to passing the title of a document, and the third parameter is used to pass the new URL. You will I see that the browser's address bar changes but the current page does not refresh.

Let’s look at an example where we will store some arbitrary data in each individual URL.

Copy code The code is as follows:

for(i=0;i<5;i ) {
 var stateObject = {id: i};
 var title = "Wow Title " i;
 var newUrl = "/my/awesome/url/" i;
 history.pushState(stateObject ,title,newUrl);
}

Run it now and click your browser’s back button to see how the URL changes. For each URL change, it stores the historical state "id" and the corresponding value. But how do we recapture the historical state and do something based on it? We need to add an event listener to "popstate", which will be triggered every time the state of the history object changes.

Copy code The code is as follows:

for(i=0;i<5;i ) {
 var stateObject = {id: i};
 var title = "Wow Title " i;
 var newUrl = "/my/awesome/url/" i;
 history.pushState(stateObject ,title,newUrl);
 alert(i);
}

window.addEventListener('popstate', function(event) {
 readState(event.state);
 });

function readState(data){
 alert(data.id);
}

Now you will see that whenever you click the back button, a "popstate" event will be fired. Our event listener then retrieves the URL the history state object is associated with and prompts for the value of "id".
It's very simple and fun, isn't it?

Original English text: http://hasin.me/2013/10/16/manipulating-url-using-javascript-without-freshing-the-page/