Block Browser History With Javascript

Jun 4, 2016

Recently I was working on a site with a unique requirement: no pages on the site should be stored in the user’s browser history. This was a site for the Women & HIV/AIDS Health Initiative (WHAI), where users naturally require privacy while using the site due to the sensitive subject matter of the site.

Before we go any further, I have to preface this post by saying that implementing behavior like this is probably a bad idea in most scenarios. Preventing pages from being stored in the browser history this prevents the back button in the browser from working (since there is no history to go back to). Manipulating standard browser behavior like this is always very confusing for users and may make it appear as if the site is broken. In fact, this functionality was removed from the WHAI site before it launched once the client saw how confusing it was. That being said, if you have found yourself in a scenario where you do want this behavior (or if you’re just interested in how it would work) then read on!

Surprisingly, this feature can be easily implemented with just a couple lines of code using the location.replace() JavaScript method. The W3C page for the location.replace() method describes what the method does:

replace() removes the URL of the current document from the document history, meaning that it is not possible to use the “back” button to navigate back to the original document.

Here is the code snippet you need to get this working:

// Intercept link clicks and use location.replace to avoid persisting history
$('body').on('click', 'a', function(event) {

    // Allow links opening in new tabs to handle normally
    if($this.attr('target') == '_blank') return;

    location.replace($(this).attr('href'));
});

The above code will cancel the click event for any links on the site and use the location.replace method instead. Note the use of the delegate event handler to also handle elements dynamically added to the page. I also am not calling the event.PreventDefault() method so that any other event handlers attached to
links will still be run.

You’ll also have to make sure to intercept any other Javascript code running on the site that changes the browser location. This might be easier said than done, depending on which libraries you need to integrate with your site.

Submitting forms will also change the window location. Here is a quick way to intercept the submit event to prevent saving the new page location when redirected. Note that this will not work on forms that submit via POST.

// Intercept form submit
$("form[method='get']").submit(function(event) {
    $this = $(this);
    event.preventDefault();
    window.location.replace($this.attr('action') + '?' + $this.serialize());
});

And that’s all there is to it!

Block Browser History With Javascript

Comments