Question

I am writing a web application that will run in kiosk mode on a touch screen. I am currently only targeting it for running on Firefox 3. A few of the use cases I have need to visit external sites. I wish to do so with an embedded browser, which I’m tackling with the help of an <iframe>. I need back/forward buttons for the embedded home page.

I’ve managed to access the history object of the iframe with

var w = document.getElementById('embeddedBrowser').contentWindow; w.history.back(); 

The history of the embedded window is the same as that of the parent window. Therefore for a newly loaded <iframe>, this call will go back to the previous page of the system.

Is there any way to avoid this or a more correct way of solving this?

Answer 1

Because there is only one history object shared within each tab this seems impossible. The proper way around it would be to test window.history.current or window.history.previous before calling back. Unfortunately, window.history.current is privileged and so not available to unsigned pages.

Here’s a rough sketch of a messy workaround:

<iframe src='somepage.html' name='myframe'></iframe> <p><a href='#' id='backBtn'>Back</a></p>  <script type='text/javascript'>    document.getElementById('backBtn').onclick = function () {     if (window.frames['myframe'].location.hash !== '#stopper') {       window.history.back();     }     // ... else hide the button?     return false; // pop event bubble   };   window.frames['myframe'].onload = function () {     this.location.hash = 'stopper';   };  </script> 

Of course, this is assuming that no (#hash) browsing ever goes on in parent window, and so on, but it seems to work for the problem of limiting back movement.