iframe control

[Lunchy_Munchy]

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

[pip]

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>

[Bill Posters]

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

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

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.

<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?

[pip]

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.

[Lunchy_Munchy]

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