Handling back-button event in browser

Question

In my web app, I have an array of items (names of genes) that the user can use the arrow keys to navigate through. When this happens, I change the browser URL to reflect the new selection:

window.history.pushState(null, null, "/" + root_subdir + "/?gene=" + gene_name);

I do this so that the user can copy the changed URL and, later on, enter that URL to load my web app with that gene's dataset. This setup seems to work correctly in current browsers.

My question is how I handle the situation when people use the arrow keys to navigate through genes in the array, and then subsequently click on the browser's back button.

This changes the URL in the browser address bar to what is in the previous URL in history, but this URL change does not load the browser with that data.

Is there an event I can listen for when users click on the back button, which will let me, say, fire an event to trigger loading that previous gene's dataset?

Answer 1

You're almost there. You already have pushState . What you need now is to attach a handler to the popstate event . Hook that handler to the same function that loads your data.