11/29/2023 0 Comments Java script history backManipulating the history will not cause the page to reload. The browser’s API will also allow you to manipulate the history state by adding a new entry pushState or overwrite the current one using replaceState. You can navigate back and forward, and even go multiple steps at a time. The browser’s history is not only a useful feature for actual users, but also for us developers. Even though this was not the use case the developers had in mind, you could use this to change the URL in the address bar without any further side effects. The big difference is, that while pushState will create a new entry in the browser’s history, replaceState will onle replace the current state.Īs a side effect of this, using the replaceState method will change the URL in the address bar, without creating a new history entry. It works almost exactly as the pushState method mentioned above. history.replaceStateĪnother way to change your browser’s history state is to use the replaceState function. It adds a new history entry, without changing what is currently on the page.Īs a side note: If I actually wanted to go to the page (meaning: Also load the content of the page), I could easily just call window.location='/new-page' to have the browser load that new page.īecause we are manipulating the browser’s history, we can still use the back button in our browser to move back to the previous URL without any problem. And this is the wonderful thing about history.pushState: It will leave the currently displayed page as is, while updating the browser’s address bar with the new URL. The browser will not actually go to the provided URL /new-page. One thing is interesting, though: It does not reload the content of the page. The browser will make good use of the last parameter url, though: It will update the address bar and show our new URL. pushState ( null, null, ' /other-page ' ) The function itself takes three arguments: a state, a title and an URL: This way we will have added a new entry and at the same time updated what is our current entry at the same time. Using the browser’s history.pushState function, we can add a new entry as the “current” entry of the history list. Right now all major browser support this feature, but (as of 2020) it is still not 100% where it can be. The browser provides a way for us to add a new entry into the browser’s history. This is a great feature that enables authors of SPA 3 frameworks to write wonderful things like the React router library. The browser’s history API 1 goes even further and allows us to add new entries or manipulate (to an extend) the entries that already exists. Going back and forth between existing entries in our browser’s history is exciting and useful. 2Ĭonveniently, calling history.go(0) will not go anywhere, and will instead just reload the page. If you provide the value 1 it will go forward one element, while calling history.go(-2) will go two elements back. We can even go multiple steps at a time (in either direction) using the history.go() function. The browser does not forget about the other elements, so that we can also go forward and make the next element the “current” one by simple calling the history.forward() method. This way, the previous element will now be marked as the “current” element. To go back to the previous page, we can simple call history.back() in our Javascript code and the browser will go “one element back” in our history. Imagine our browser’s history as a series of elements: There is always one element, that is our “current” element and it represents the page that we are currently seeing.įortunately for us, the functionality behind the back and forward buttons is provided to us by the browser’s history object. On the one hand we can move back and forth through the browser’s history and on the other hand we can even manipulate the current and future state. The Javascript API 1 to deal with the browser’s history is surprisingly easy to use. Whenever we find ourselves in a situation where we want to go back to the previous page (or even a few pages back) we can easily do this with the back button in our browser. When we navigate from one website to another website, we are creating basically a list of websites that we went to. The browser’s history feature is something that we use almost every day, without thinking about it too much. Working with history, pushState and replaceState in Javascript 22.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |