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?

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?

• javascript
• html
• iframe

• Are you embedding this inside another application? – Diodeus - James MacFarlane Commented Oct 28, 2008 at 19:41
• I have a web application running on the touch screen, in kiosk mode. The embedded site is simply an iframe inside a page in the web app. – Guðmundur Bjarni Commented Oct 28, 2008 at 19:45

2 Answers 2

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.

You might want to take a look at Adobe AIR. It lets you write your application using all the same tools / languages (ajax, html, etc etc), but since it runs as a desktop app and not in a web browser, you have more control over things, such as embedding browser frames and knowing exactly what they are doing, what URL it's going to, controlling it's history, etc. Look here for a few pointers on getting started.