SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: iframe control

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iframe control

    how can I change the url of an iFrame using onClick?

  2. #2
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function setIFrameURL(url) {
      var oIFrame = document.all['myIFrame'];
      oIFrame.src = url
    }
    
    <IFRAME NAME="myIFrame" WIDTH="300" HEIGHT="300" SRC="page1.html"></IFRAME>
    
    <BR>
    
    <A HREF="JavaScript:void(0)" onClick="setIFrameURL('page2.html')">Take iFrame Somewhere Else</A>
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pip, that will only work on IE as it uses the IE proprietory DOM. (document.all)

    A much better option would be to use the W3C DOM which will (at least) work on IE5+, NN6+/Moz and Opera..

    Code:
    function setIFrameURL(id,url) {
    frames[id].location.href=url
    }
    
    ...
    
    <iframe name="myIFrame" id="myIFrame" width="300" height="300" src="page1.html"></iframe>
    
    ...
    
    <a href="#" onclick="setIFrameURL('myIFrame','page2.html');return false">Take iFrame Somewhere Else</a>
    It's also more ideal to use location.href rather than src.
    With location.href the page change is added to the history and so the back button still works.

    Some platform/browser combos don't support that properly *yet*, but it would be easy to create a function that offered location.href to those that supported it and used src= for the others.
    That way, at least *some* users will still be able to use the back button.

    A good fall back would be...
    Code:
    function setIFrameURL(id,url) {
        if ( (browser is IE 4 or 5 on Windows) or (browser is Opera) ) {
        document.getElementById(id).src=url
        } else {
        frames[id].location.href=url
    }
    }
    
    ...
    
    <a href="#" onclick="newPage('myIFrame','page2.html');return false">Take iFrame Somewhere Else</a>
    which would still offer wider support than using the document.all DOM.


    Lunchy_Munchy, can I ask why you want to use onclick to change the iframe content page?

    Fwiw, you can actually target named iframes just like targeting a normal frame.

    Code:
    <a href="page2.html" target="myIFrame">Link</a>
    and this will work in all modern browsers without problems.

    Are you using the href for another purpose?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would have to agree to that.

    I tend to only give IE compatible code because I'm use to coding for IE first, and then fixing up the code to support browser compatibillity. Then I assume that everyone works that way. Sorry bout that.
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually ended up using

    window.content.location='news.html';

    where 'content' is the name of the iframe

    will that work for other browsers other than ie


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
  •