I've implemented a single-page website via a header (incl. nav), a footer and main divided into 5 article elements where each article carries the content of the home, about, services, prices and contact page-views.
The site opens on the home page-view because the index.html file has the home article displayed but the other article elements hidden.Clicking another link in the nav bar causes a script to run that hides the home page and unhides the selected page; as well as putting an indicator (e.g. an underlining) on the current page link on the nav bar.
I maintain page history by creating a JS state object (basically 2 string parameters for the current nav bar link and the currently displayed article ids) and using this to recreate the previous page-view when the <- back button is clicked.
document.title = MySite.com +" | " + newpage; // newpage = "About" / "Services" / "Prices" / "Contact"stateObject = { "currlinkid": newlinkid,"currpageid": newpageid };history = window.history;history.pushState(stateObject, title);All works fine going back and forward.
My problem lies with simulating a page refresh/reload via the browser's 🗘 button.Originally I made .html copies of the various page-views and put them alongside the index.html file in the server's root folder. I appended a relative URL string to the state object for the page view so that I now am pushing state-creation detail, a title and a relative URL onto the history stack, i.e.
history.pushState(stateObject, title, relurl);This ensures that when I click on any given nav bar link, it changes to the appropriate page-view and also puts the respective URL upon the address bar.
Now when I click on the 🗘 button it does appear to reload that page but it replaces the current URL with that of the home page. To be sure that the actual server page is loaded rather than a recreation of that page-state from the cache or some other way, I put a marker entry into the server .html pages, e.g. about.html has
<meta name="page-source" content="off-server-about"/>whereas the home page which comes from the index.html file has the meta
<meta name="page-source" content="off-index"/>Now after uploading the new source files and scripts and clearing old history from the browser, I navigate to my site's home page. It loads the index.html file and puts MySite.com/index.html on the address bar. On changing to other page-views via the nav bar I get the correct page-state, the correct URL shown on the address bar and the page source shows it to have
<meta name="page-source" content="off-index"/>All correct so far.
But when I refresh via 🗘 I get the page-view reloaded from its mirror on the server with the correct meta tag but it is the index.html URL that is showing on the address bar . . .So that a second refreshing will now produce the home page-view rather than the original page-view.
Can anyone suggest a way to retain the original URL when the refresh process is applied ?