Fun with iFrames!! Back, Forward, Refresh, Close individual iframes

[samdeskin]

I think this will be a fun challenge for a really creative programmer:

1. Have three iFrames in one Browser window for the websites Google, Yahoo, and Wells Fargo.
----A. Google behaves well in iFrames
----B. Links on Yahoo seem to open in a new browser
--------i. The links on the websites should open within their respective iFrames – unless the user right clicks and decides otherwise or the website requires the link to be opened in a new window.
----C. Wells Fargo seems to open in a new window, not the iFrame – but other sites with SSL do just fine.
--------i. The websites should open within their respective iFrames
2. Using one set of buttons in the browser window so the user can go Back, Forward, Refresh and Close the active iFrame.
----A. Traditionally, iFrames use the browser’s history. What we need is a way to access the “history” for each iFrame separately, so pressing Back does not cycle through the browser’s history, but “the iFrames’ history.”
3. There also seems to be some interactivity issues with iFrames and cookies. For example, Google, does not seem to recognize that cookies are turned on or that the user is already logged in outside of the iFrame.

Here is the script I have so that does not work...


<table width="100%" height="100%"><tr>

<td width="33%"><iframe align="center" width="100%" height="95%" src="http://google.com" frameborder=yes name="myIframe" id="myIframe"></iframe>
<p align="center"><input type="button" VALUE="Back" onClick="history.go(-1)"><input type="button" VALUE="Forward" OnClick="history.go(1)"><input type="button" value="Refresh" onClick="window.location.reload()"><input type="button" VALUE="Close" OnClick="window.close()"><p></td>

<td width="33%"><iframe align="center" width="100%" height="95%" src="http://yahoo.com" frameborder=yes name="myIframe" id="myIframe"></iframe>
<p align="center"><input type="button" VALUE="Back" onClick="history.go(-1)"><input type="button" VALUE="Forward" OnClick="history.go(1)"><input type="button" value="Refresh" onClick="window.location.reload()"><input type="button" VALUE="Close" OnClick="window.close()"></td>

<td width="33%"><iframe align="center" width="100%" height="95%" src="http://wellsfargo.com" frameborder=yes name="myIframe" id="myIframe"></iframe>
<p align="center"><input type="button" VALUE="Back" onClick="history.go(-1)"><input type="button" VALUE="Forward" OnClick="history.go(1)"><input type="button" value="Refresh" onClick="window.location.reload()"><input type="button" VALUE="Close" OnClick="window.close()"></td>

</tr></table>


Any thoughts??

sam

[jsebrech]

I've looked extensively at history behavior. Every time you load a new URL into an iframe, that adds a new entry to the browser history. This is unavoidable (well, in some browsers it is, if you create the iframe from code). So, even though you can add additional history items using hidden iframes, it's very difficult (or even impossible) to do what you propose to do.

[samdeskin]

But iFrames have name and id fields - what use are those? :confused:


I've looked extensively at history behavior. Every time you load a new URL into an iframe, that adds a new entry to the browser history. This is unavoidable (well, in some browsers it is, if you create the iframe from code). So, even though you can add additional history items using hidden iframes, it's very difficult (or even impossible) to do what you propose to do.

[samdeskin]

What are your thoughts on opening a website in a new tab...like on firefox or ie7?

[jsebrech]

You can't force a new tab.

As for managing iframes, like I said, the history behavior of browsers is mostly outside of your control. You can add additional items to the history by using a hidden iframe (see this page (http://www.flirtinserat.de/) for more info on this), but you can't not add items, or remove items already in the history.

Anyway, I would suggest to let the browser do what it does best, manage multiple sites, and not try to do its job for it. If you really want to make a better browser, you're not going to be able to do it inside of another browser (unless you were to implement an entire browser in flash or java, which would take you years to do if you wanted to support all the modern web standards).