Results 1 to 6 of 6

Thread: Cross-browser iframe url replace

  1. #1
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Cross-browser iframe url replace

    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <a href="page2.htm" target="frame1">Page 2</a>
    It requires that frame1 have the name 'frame1' not just the id, ex:

    Code:
    <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):

    Code:
    <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)

    Code:
    <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):

    Code:
    <form action="page2.htm" target="frame1">
    <div>
    <input type="submit">
    </div>
    </form>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    baka (06-26-2008)

  4. #3
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    You could also try to replace the highlighted with parent:
    Code:
    <input type=button onclick="top.document.getElementById('iframe1').contentWindow.location.href='page2.htm'">
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. The Following User Says Thank You to rangana For This Useful Post:

    baka (06-26-2008)

  6. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by rangana View Post
    You could also try to replace the highlighted with parent:
    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    baka (06-26-2008)

  8. #5
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •