Javascript Back Button - Stop the initial load of back button from working

Question

Hi,

I'm using a javascript back button link and forward button link to control the user's history inside a modal/lightbox window.

The challenge I have is when the modal window is launched, and the "back" and "forward" buttons are present for the user to click, if the initial javascript back button is clicked when the window opens, it actually closes the modal window, because the javascript history is taking the user back to the page PRIOR to the opening of modal window.

So, in essence, I'm trying to disable the "back" button from working on the initial load of the modal/light box.

Is this possible? Here's a demo of what is happening... http://www.apus.edu/_test/evan/modal/start.htm

<a href="javascript:history.go(-1)">Back Button</a> 
<a href="javascript:history.go(1)">Foward Button</a>

Answer 1

I'm not exactly sure if I understand what you are doing with modal windows, but the first thing that pops to my mind is to write a function, and wrap the history.go(-1) in a conditional

function goBackIfAppropriate() {
  if( /* <check goes here> */ ) {
    history.go(-1);
  }
}

and in your markup

<a href="javascript:goBackIfAppropriate()">Back Button</a> 

Just to not let this answer finish without any mention of jQuery: check out "jQuery BBQ: Back Button & Query Library"

Update:

Okay, so what we have here is an inconsistent behavior of history.go in iframes across browsers. Firefox3 seems to do exactly what you want, Chromium doesn't. What you could do is to provide an id to your "back"-link

<a href="javascript:history.go(-1)" id='back_button'>Back</a>

Then, after your iframe-content is loaded, you grab the link:

var iframe = document.getElementsByTagName("iframe")[0];
var link =  iframe.contentDocument.getElementById("back_button");
link.parentNode.removeChild(link);

or (using jQuery ;)

$("iframe").contents().find("#back_button").remove();

or do whatever else you like with it.