Kelvin S. Teo

Email conversation

From	Kelvin S. Teo
To	Me
Subject	Problem with iframe concept and nodes
Date	2 March 2005 07:05

Hi Mark,

I've gone through your tutorial(real helpful!) but I can't understand the
concept of iframes and their parent nodes.

You see, in a normal frames page(2 frames), for a frame to access the other
frame:

  parent.frames.otherframename

but how about a page with an iframe? is it considered to have two frames
also? (the iframe and the page containing the iframe) or just one frame?
I'm totally lost here.. :)

I'm actually trying to do something like this: a table with a few cells and
each cell will contain an iframe with the same page loaded inside. I need
to find out the cellIndex of the particular cell when the focus is on an
element inside the embedded page, so that I can do something like delete
that particular cell. To make it clearer:

page1:

<body>
  <table>
     <tr>
        <td>
            <iframe src="page2"></iframe>
        </td>
        <td>
            <iframe src="page2"></iframe>
        </td>
     </tr>
  </table>
</body>


page2:

<body>
<input type="button" onclick="alert(THIS.SOMETHING.SOMETHING.CELLINDEX)">
</body>

I thought the code might be something like 'this.parentNode.cellIndex' but
it didn't work. Do you know what the correct code might be or am I doing
something impossible?

Thanks in advance!

Regards,
Kelvin

From	Me
To	Kelvin S. Teo
Subject	Re: Problem with iframe concept and nodes
Date	2 March 2005 12:46

Kelvin,

> parent.frames.otherframename

And this is almost exactly the same with iframes. With normal framesets,
the frames collection is optional, but you should always use it with
iframes.

> the iframe and the page containing the iframe

Exactly. The page containing the iframe is just like the page containing
the <frameset> in normal frames. The page in the iframe is just like the
page contained within a <frame> in a normal frameset.

The only difference is the referencing. 'parent' will reference the parent
page, but frames collection references the iframe, not the page inside it.
Adding 'window' on the end will reference the window object of the document
in the iframe:
parent.frames['otherframename'].window.document

you can also use
var x = parent.getElementById('iframeID');
x = x.contentDocument ? x.contentDocument : x.document;
(although personally I find this unnecessary as the first syntax references
the iframe page properly without needing a cross-browser fix)

However, none of this has any bearing on what you are trying to do right now :)

> each cell will contain an iframe
> delete that particular cell.

Right, so to summarise, you want the page within the iframe to obtain a
reference to the iframe itself (and the parent element of that iframe so
the iframe can be deleted). This sounds so easy, but there is not (to my
knowledge) any way to reference the iframe element from within the page in
the iframe. So this has to be done the long way round. Reference the parent
page, reference the iframe elements it contains, then step through all
those iframes, and check if the document objects of the pages they contain
matches the document object of the current page. If it matches, then that
is the current iframe.

var iframes = parent.document.getElementsByTagName('iframe');
for( var ind = 0; iframes[ind]; ind++ ) {
     var theDocument = iframes[ind].contentDocument ? iframes[ind].contentDocument : iframes[ind].document;
    if( theDocument == document ) {
        //this is the current iframe
         iframes[ind].parentNode.parentNode.removeChild(iframes[ind].parentNode);
        //and now the cell has been deleted
    }
}


Hope this is what you needed

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Kelvin S. Teo

Navigation

Search

Site navigation

Email conversation