Changing source of iframe

I'm using an iframe within my webpage and want to have a link that when clicked changes the content of the iframe, however, each time it is clicked it will link to a different page from a javascript array. At the moment I have tried a function which increments the position in the array and should then change the content of the iframe but this doesn't work. I've tried doing this using the dom model rather than linking with target as I couldn't handle the array that way.


function next(){
pos+=1;
item=regionarray[pos];
document.getElementById("info").src="./page.php?item="+item;
}

<IFRAME SRC="./top.html" name="info" WIDTH=450 HEIGHT=100>
If you can see this, your browser doesn't
understand IFRAME. However, we'll still
<A HREF="./top.html">link</A>
you to the file.
</IFRAME>
<p>
<a href='javascript:next()'>Next</a>

Does anyone know why its not working with the DOM stuff or whether there is a better way of doing this?

Thanks

Iframes are a bit tricky. Ordinarily your code might work in IE. However, for all other browsers, the script engine will never retrieve an element by id if it doesn't have that id. In your example you are getting the iframe by id but it is its name, not its id that is set to 'info'. Additionally, as I say, iframes are tricky so even though IE will often retrieve a named element by id, even it probably won't in this case. To make matters worse, iframes don't usually respond well to having their src attribute changed in this fashion. A better approach would be:

window.frames.info.location="./page.php?item="+item

This will access the iframe by name and load the new address into it.

or give in an id as well , isn't that easier?

<IFRAME SRC="./top.html" name="info" id="info" WIDTH=450 HEIGHT=100>

Now you may use whichone of the folowing

by name
top.['info'].location.href=newurl
by id
document.getElementById('info').src=newurl
document.getElementById('info').setAttribute('src',newurl);
document.getElementById('info').contentWindow.location.href=newurl;