javascript - browser history manipulating

Question

I am loading pages with JavaScript and I want to push the loaded page in the history.
This means that when the back button is clicked, the pushed page will be loaded.

I am not refreshing the page, I am loading it via JavaScript.

I have already tried history.pushState() but after the back click, it did not return anything.
I can use it once when I push history and after write:

window.onpopstate = function() {
    // do something
}

However, I can't use that anymore.
Perhaps I am misunderstanding window.onpopstate...

The 'easy' way to do this is with hash fragments after the base page url. These will automatically get saved into history and does not require any tinkering with the back button. Then you can use onhashchange event to listen with javascript to the url and hence, load the correct page. — Shilly, Oct 16 '18 at 07:41
Could you first clarify a bit what you're doing? You have one HTML page that you update with javascript? ( single page application ) Or do you have several seperate HTML pages that you navigate with hyperlinks? ( basic multipage application ) I assume you have a single page application due to you mentioning you don't refresh anything. — Shilly, Oct 16 '18 at 08:04

score 1 · Accepted Answer · answered Oct 16 '18 at 08:06

1

Basic single page applications ( loading pages with javascript instead of having several seperate html/php/asp/jsp pages) works with manipulating the hash fragment of the page. Changes to that hash will automatically create a new entry into the history so the go back and go forward buttons of the browser can work normally as if there's several different HTML pages.

We can then listen to the hashchange event to know when the hash changes and then just replace the content of the page. So after clicking 'page 1' below, the hashchange event is triggered and there we can call whatever function will render that page on the screen.

window.addEventListener( 'hashchange', event => {
  alert( `loading ${ window.location.hash }` );
  // const page = window.location.hash;
  // pages[ page ].render();
});

<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>

So if you click 'page1', you'll get the alert 'loading page 1'.

If you then click the page 2 link, you'll also get an alert.

If we then click the back button, we get ther alert 'loading apge 1' again, since the previous link in our history was the hash containing page1.

So using this technique of 'routing', we can easily have the back/forward button work correctly, without having to resort to pushState() and popState(), which won't do much for us since we only have one HTML page and javascript to fill it.

answered Oct 16 '18 at 08:06

Shilly

8,511
1
18
24

i undertand this but how i can return to last loaded page i have multiple pages not only 2 – worker Oct 16 '18 at 08:30
In this technique, the page you have to load is under window.location.hash. The hash will already be changed to pageX, so if the hashchange event says the current page is pageX, you have to load pageX with javascript. So you can have as many hyperlinks you want as long as the hashchange event handler can load them. In the example I gave, I would store all the javascript functions that will render a page in the 'pages' object. so that calling pages.pageX.render() will render those divs into the browser.. – Shilly Oct 16 '18 at 08:47
I tried this but when i pressed on back button it was alerting corectly but did not load page(i uncommented render part). – worker Oct 16 '18 at 09:00
I don't know how you load your pages, so can't really comment on that. Just calling the correct function does not work for you? – Shilly Oct 16 '18 at 09:20
It will work but i should write many if for that. I am avoiding this. I wanted to do that without adding any tags into link but it seems i cant do that. i want the best way to do that. – worker Oct 16 '18 at 09:23
I don't understand what you are trying to say with this last sentence. – Shilly Oct 16 '18 at 09:27
i have page link like this http://example.com/page i didnot want to link looked like http://example.com/page/#page but i see i cant do this how i want. this code will work if i write each if for each page and i dont want this. maybe there is better way and i am looking for it. – worker Oct 16 '18 at 09:56
It's possible, but then the back button won't work. A page is defined by its url. You can't have a working back button AND not change the url in any way AND still have several different pages under the same url without severely changing the back button behaviour, which will only confuse your end users and prevent direct linking. So you'll have to give up one of those 3 criteria. EIther change urls so the back button works and you have several different states. Or give up having different states and switch to all different php pages. Or give up back button working as the user would expect. – Shilly Oct 16 '18 at 11:18

score 0 · Answer 2 · answered Oct 16 '18 at 07:54

0

could window.history.back() be what you are looking for?

answered Oct 16 '18 at 07:54

Oreoluwa Aboluwarin

181
1
8

That will do the same as pressing the back button. – Shilly Oct 16 '18 at 07:54

javascript - browser history manipulating

2 Answers2