I have this page that has two tables. The left table is a list of links that point to items in the right table using A href='#itemid' with the corresponding A id='itemid' in the right table. It works fine when you're just clicking links in the left table, but if I click the back or forward button the page reloads but doesn't return to the position it was in. The page URL includes the #itemid, so I don't understand why the page doesn't return to that position when the back or forward button is clicked. Also, the first load is just the webpage name without a hashtag, so I also need to know how to tell the browser to reload the page with both tables at the top. Currently, the only way I can get it to cooperate is by holding SHIFT and clicking the refresh button.
I have tried every refresh example I can find and none of them work.
META http-equiv='refresh' content='0'
This was disastrous, just kept constantly refreshing the page.
window.location,refresh();
document.location.refresh();
location.refresh();
All of those in a unLoad() attribute in the BODY tag, with and without true as the argument to the refresh function. I really don't want my web host's server constantly having to serve the page anyway, so true isn't an option even if it did work.
I am out of ideas. I also understand that the history is a single doubly-linked list and the forward and back buttons just move through the list in each direction, but you would think the action would result in the page being reloaded the way it looked the last time you were on that page, not like you're still on the page you were last on.
You need to use the history API, to push and pop states according to your needs.
Every time you click one of your links, you need to push a state and a location so that when you press the back button, that state is restored with the given location.
Below is an example on how you might use it. I would not recommend managing the whole page content with innerHTML. This is just done for simplicity. What you are doing in the callback and with the state, and under what circumstances you use saveState to push extra state, is up to you.
const router = (hook = console.log) => {
window.onpopstate = ({ state }) => hook(new URL(window.location.href), state);
hook(new URL(window.location.href));
return {
anchorHandler: e => {
e.preventDefault();
window.history.pushState(null, "", e.target.href);
hook(new URL(e.target.href));
return false;
},
saveState: (state, href = window.location.href) => {
window.history.pushState(state, "", href);
}
};
};
const locations = {
"/": (state) => `<h1>Home</h1>
<p>Type something in this input. If you blur it, it will be saved as state.
Now you can navigate back and forth to remove/restore it. <br />
For example, type something and navigate to the about page. Then press the back button.
</p>
<br />
<input
value="${state?.text || ''}"
onblur="saveState({text: this.value})"
/>
`,
"/about": (state) => `<h1>About</h1>`,
"/contact": (state) => `<h1>Contact</h1>`,
}
pageContent = document.getElementById("page-content");
const { saveState, anchorHandler } = router((location, state) =>
pageContent.innerHTML = locations[location.pathname]
? locations[location.pathname](state)
: locations["/"](state)
);
document
.querySelectorAll("a")
.forEach(a => a.addEventListener("click", anchorHandler));
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<main>
<div id="page-content"></div>
</main>
I cannot show it as snippet because, SO, as security limitations around the usage of the history API. You can check pull this repo and run it locally https://github.com/bluebrown/spa-router-example, or visit this page where I have deployed that repo, https://spa-router-example.pages.dev/.