How to create a Back button for an Iframe?

When you load content in an iframe, it may also contain links you want to navigate back / forward, just like you do using the browser's Back and Forward buttons.

The window object's history object keeps the URL of all visited pages you have opened in your browser.

There are two ways of simulating the Back button:

window.history.go(-1)

window.history.back 

There are two ways of simulating the Forward button:

window.history.go(+1)

window.history.forward 

Create an iframe and give an id/name attribute to it.

<iframe align="center" width="50%" height="50%" src="pic1.jpg"  frameborder=yes name="myIframe" id="myIframe"> 
</iframe>

Place this form in the main document or frame.

<form>
<input type="button" VALUE="&lt; &lt; &nbsp; Back &nbsp;"  onClick="history.back()"> 
<input type="button" VALUE="&lt; &lt; &nbsp; Previous"  onClick='window.frames.myIframe.location.href="pic1.jpg"'> 
<input type="button" VALUE="&nbsp; Next &nbsp; &gt; &gt;"  onClick='window.frames.myIframe.location.href="pic2.jpg"'> 
<input type="button" VALUE="Forward &nbsp; &gt; &gt;"  onClick="history.forward()"> 
</form>

Adding the Next and Previous buttons are used to trigger off the paging effect of the browser.

Related threads:
Creating a Back button in a iframe

Java Script FAQ