Log in

View Full Version : Cross-browser iframe url replace



baka
06-25-2008, 08:02 AM
Hi. I have two iframe's in a page. I need to click a button in iframe1 and redirect the iframe2 to another page. I have found this code but I'm not sure if it's compatible with older browsers. I checked a few references but I couldn't find anything regarding iframes. Here's the code:

<input type=button onclick="top.document.getElementById('iframe1').contentWindow.location.href='page2.htm'">

I need it at least work with ie5.5+, firefox1+ and opera8+. What do you think?

jscheuer1
06-25-2008, 12:54 PM
There are various ways to go about this. The simplest would be a link (doesn't require javascript on the user's end and will work across domains):


<a href="page2.htm" target="frame1">Page 2</a>

It requires that frame1 have the name 'frame1' not just the id, ex:


<iframe id="frame1" name="frame1" src="whatever" . . .

Now you could do this (using just the id - requires javascript - may be limited to pages all on the same domain):


<input type="button" onclick="top.document.getElementById('iframe1').src='page2.htm';">

Or (requires the name attribute and javascript and is limited to pages all on the same domain)


<input type="button" onclick="top.frames['iframe1'].location.href='page2.htm';">

Or finally, and what I'd recommend (requires name, works with or without javascript, and should work across domains):


<form action="page2.htm" target="frame1">
<div>
<input type="submit">
</div>
</form>

rangana
06-25-2008, 01:17 PM
You could also try to replace the highlighted with parent:


<input type=button onclick="top.document.getElementById('iframe1').contentWindow.location.href='page2.htm'">

jscheuer1
06-25-2008, 01:25 PM
You could also try to replace the highlighted with parent:


<input type=button onclick="top.document.getElementById('iframe1').contentWindow.location.href='page2.htm'">


That will not fit the requirements, vis a vis being supported in all the browsers mentioned (the problem there is the use of the contentWindow object), and essentially changes nothing in the code unless there is more than one level of nesting, which their doesn't appear to be here, but could be, that wasn't made precisely clear.

baka
06-26-2008, 07:08 AM
Thanks a lot for the all help.

I forgot to add one more thing. What about Mac browsers? I don't have a Mac of any way to try this on a Mac, any ideas about your code being compatible with Mac browsers? I assume the <a target> would work but I'd like to know about the javascript solution too. I appreciate any info.

jscheuer1
06-26-2008, 08:07 AM
They should all be good with any modern Mac browser, I don't have a Mac to test in though. The last method I mentioned (also not requiring javascript), the one that uses a form, would be good in any browser that supports iframe. In fact, with all the code I offered, support of iframe would be the breaking point, as virtually all browsers that support iframe would support the code. With, of course the proviso that javascript must be enabled for the javascript solutions.