I came upon an issue on a GitHub project where the maintainer wanted to dynamically change the content of the page and give the feeling of it being a “native” page, without actually creating another HTML file.

He also wanted his website to only use vanilla JS and HTML files so introducing Angular, Svelte or any other framework to him was not an option.

Fortunately, I discovered an interesting API introduced in HTML5 that can solve exactly this kind of issue.

Let’s explore it step by step.

Setup

For our example, we will build a very simple page that can give the feeling of using some kind of routing.

Firstly, we will create our simple HTML page:

  
     charset="utf-8" />
    
     name="viewport" content="width=device-width, initial-scale=1" />
  
  
    
Fake routing
     id="details">Show details
  

Which does not renders much for now.

Changing the URL

We now want to change the URL whenever the user clicks on the button.

To do so, we can use the pushState function to programmatically add a new entry to the history, which will also result in the URL being modified.

Its usage is fairly simple and made of three parameters:

1. The state that will be pushed along the URL, which can be a light JS object or some kind of structured data
2. An unused parameter, mandatory due to backward compatibility, that we can replace by an empty string
3. The actual URL we want to push

Let’s add a small script to change this:

And test it:

Wonderful! We may now focus on the content

Updating the page

In order to update our content, we will need some kind of template and to substitute the current HTML body by it.

Using the native API, this is pretty straightforward:

And we now have our virtual page!

Fixing the back button

With our current solution, once the details page has been shown, it is not possible to display the index again without having to reload the whole page.

To fix this, we can start by creating a local history by pushing the content of the body element into an stack before removing it:

Then, we can use the event that is kind of the mirror of pushState: popstate.

By listening to it, we will know whenever the back button has been pressed and we will be able to restore the previous content of the page:

At this point going back in the history would work but we won’t be able to navigate again because we restored the whole page but the event listener would not have been set again.

A quick way to fix it would be to re-register it inside our onpopstate event handler in the same way we did when we first add this logic.

Let’s extract this logic into a dedicated function and call it:

And we are done!

In this small article we saw how to take advantage of the couple pushState/popState to give the user the feeling of browsing a different page.

This is a light introduction to some kind of virtual navigation but, in my case, it helped me to successfully implement it into this maintainer’s project.

However, please note that reloading the page when the user is on our URL that does not match an actual route will result in an HTTP 404 error.

One solution would be to replace the navigation to our virtual pages by hashes (like ...#details instead of .../details). This way, the browser would still render our root page on reload and we would be able to intercept whatever is after the hash symbol to render our details page instead.

I hope that you learned something useful there!

Entire sources used for the demo:

  
     charset="utf-8" />
    
     name="viewport" content="width=device-width, initial-scale=1" />
  
  
    
Fake routing
     id="details">Show details