Javascript - how to change elements content inside a page when using iframes, using dom, not jquery

Question

I have this iframe and as u can see it call a js function with the onload trigger.

<iframe name="top" id="top" width="99%" height="20%" src="top.htm" frameborder="0" scrolling="no" onload="log_in()"></iframe>

What i need to do is to effect the element inside "top.htm" (change innerHTML and stuff like that) from that function.

But the problem is that the funnction does not recognize the elements of the "top.htm" page, only the ones in index.htm (the page with the iframes).

p.s. i have to use DOM and i have to use iframes.

Any one knows how to do that?

10x :-)

Answer 1

For example access to all dom elements:

document.getElementById("top").contentWindow.document.getElementsByTagName("*")

Is it your problem?

Answer 2

The Iframe Window and its Document

References to the window generated by the iframe and to the document loaded into the iframe can be obtained via the frames array using the name attribute.

window.frames[iframeName]
window.frames[iframeName].document

The frames array method of referencing has broad support, even among quite old browsers, as long as you attach a name attribute to the iframe. For best results, use both name and id.

For more up-to-date browsers, the document inside the iframe can also be referenced via contentWindow (IE win) and contentDocument (DOM) properties of the iframe element:

// IE5.5+ windows
document.getElementById(iframeId).contentWindow
document.getElementById(iframeId).contentWindow.document

or,

// DOM 
document.getElementById(iframeId).contentDocument

from http://www.dyn-web.com/tutorials/iframes/

sample here: http://www.dyn-web.com/tutorials/iframes/refs.php