getElementById(iFrame)

JavaScript
1

I’m having trouble finding an element by its ID when the element is within an iFrame. Is this one of those “It’s not suppose to work that way!” situations?

And, before you ask, there’s a really good reason that I’m using an iframe; I’m putting a message window over a form with select tags and a submit button. An iFrame will cover these elements in IE whereas a div with a solid background won’t. No amount of z-index’ing will change it.

So, how do I get document.getElementById(AjaxTarget) to work when AjaxTarget is a div within an iFrame?

2

/*
You need to get a reference to the document that is contained by the contentWindow property of your iframe:

if your iframe has an id of ‘myframe’:
*/
var inDoc= document.getElementById(‘myframe’).contentWindow.document

To reference a div named myDiv in the document displayed in the window in the iframe:
var el= inDoc.document.getElementById(‘myDiv’);

3

Cool.

I’ll have a go at it.

4

When I try this

var inDoc = document.getElementById('tdFrame').contentWindow.document;
     inDoc.document.getElementById(AjaxTarget).innerHTML = response;

I get

Error: inDoc.document has no properties

But when I use

var inDoc = document.getElementById('tdFrame').contentWindow;
     inDoc.document.getElementById(AjaxTarget).innerHTML = response;

I get

Error: inDoc.document.getElementById(AjaxTarget) has no properties

I like the second error message better; at least its giving me that inDoc.document is legitimate.

Can you see where I’m going wrong here?
PS: document.getElementById(AjaxTarget).innerHTML was cool outside the iFrame; AjaxTarget is legitimate.

5

Try using the ‘frames’ collection in the parent document:

if your frame is named ‘tdFrame’:


frames['tdFrame'].document.getElementById(AjaxTarget)

HTH