Welcome to WebmasterWorld Guest from 107.20.54.98

Forum Moderators: open

Message Too Old, No Replies

Accessing DOM elements of an iFrame

using JavaScript

     
5:20 pm on Mar 6, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Hi All,

I am trying to alter the style property of an object (lets call it link) within an iFrame (lets call it daFrame) of a page. The code that I am using:


document.getElementById('daFrame').document.getElementById('link').style.backgroundColor="#000";

What I am trying to do, in theory, is manipulate (using JavaScript) some object within an iFrame, from the parent frame. I've tried a large number of different approaches without any success. Any pointers in the right direction would be great! (This need only work within IE!)

TIA

7:25 pm on Mar 6, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Well, all you have to do is call the iframe like you would any other frame:

daFrame.document.getElementById ...

The iframe needs a name though ..

12:48 am on Mar 8, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 10, 2003
posts:188
votes: 0


the iframe is unusual in that it "lives" in two place in the browser javascript heirarchy.

It's part of the window.frames collection because it's a kind of frame AND it's also a part of the document tree because it's an element.

window.frames[x].document.getElementById('').style.yyyyyyy

with x being 0 if there are no other iframes in the document.

also the syntax you had before should be ok, I wonder why it's not working. The problem may be the id "link".
Try something else.
If it still doesn't work, try it using the frames collection as above and then, if it still doesn't work, the problem lies elsewhere.

1:39 pm on Mar 8, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Also, it's not necessary to use "backgroundColor" .. you can use just "background"
10:31 am on Mar 10, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Hi all,

Thanks for all your suggestions. As per ricfinks suggestion I used the window.frames[] syntax and this is working perfectly now:


window.frames[0].document.getElementById('daLink').style.backgroundColor="#000";

I'm not sure why trying to get at it using getElementById didn't work, as (like ricfink) I thought that an iFrame lived both in the Frames array and the Id array.

DrDoc, both background and backgroundColor work sine (in IE) - does anyone know which is the W3C standard for this?

8:24 pm on Mar 10, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


They are both W3C standard (or JS standard if you want). It's just that "background" is more widely supported.