Dealing with Browser’s back Button with Headers and Javascript History Object

August 28, 2012 | By kiranbadi1991 | Filed in: Browser, Development, Environment, Others, Testing.

Quite often while coding application which has lot of forms in it, there comes a requirement where in developers needs to deal with back button functionality of the browser.Disabling the back button with Javascript is one of the options used by many sites to deal with duplicate submission of forms.

Browsers maintain information about pages visited in the browser’s history and Javascript can be used to manipulate the history using windows.history object.

Some of the methods which we can use to know more about history are.

This works exactly as back button of the browser.Goes 1 page back.
This works as exactly as forward button of the browser.Goes 1 page forward.
The number of pages in the history stack of the browser can be determined reading its length property,
We can go back and forth in the history  identified by using current position of the page,
go function is used to load relevant pages from the history. go(-1) loads the 1 page backwards from the current page and go(1) moves the browser 1 page ahead from the current page.
HTML 5 History object also provides good way to deal with History management of the browsers, some of the functions in HTML 5 are as below,(Reference: Opera Dev Library)
  • window.history.length: Returns the number of entries in the joint session history.
  • window.history.state: Returns the current state object.
  • window.history.go(n): Goes backwards or forwards by the specified number of steps in the joint session history. If the value you specify is zero, it will reload the current page. If it would cause the target position to be outside the available range of the session history, then nothing happens.
  • window.history.back(): Goes backwards by one step in the joint session history. If there is no previous page to go to, it does nothing.
  • window.history.forward(): Goes forwards by one step in the joint session history. If there is no next page to go to, it does nothing.
  • window.history.pushState(data, title [, url]): Pushes the data specified in the arguments onto the session history, with the given title and URL (the URL is optional).
  • window.history.replaceState(data, title [, url]): Updates the current entry in the session history, with the given data, title and URL (the URL is optional)

History object of HTML5 gives us the tool to push/replace the url in the browser’s history and its this feature which I believe is somewhat in secure in nature.Maybe we can have some warning message whenever some scripts wants to read or write the history of the user’s browser exactly the way geolocation api’s work.

Anyways coming back to our topic, we can also use the javascript to control the behavior of the back button,one of the ways quite often used is

function disablebackbutton()
This is most ugly way of dealing back button problem.Just disable it on onload and onpageshow events.

Another clean way of dealing with back button issue is tell browsers not the cache or store any information of the page in its history and this can achieved by setting appropriate headers.With Servlets and JSP , this can done  by

    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Expires", "0");
    response.setDateHeader("Expires", -1);

These headers can be added to any page which requires that it should not be cached or reused in any way.I did go via header’s approach did resolve the back button issue.Now whenever I use back button I get Page expired message and for some pages form values are not pulled out from cache.

I would suggest going via header’s approach as this can be done at server side and has very limited or low dependency of the clients and most browsers honors those headers.

Technorati Tags: ,,,

Tags: , , ,

Comments are closed here.