DOM - get element in Iframe from parent document

[Henrik Stidsen]

I am trying to access a table in an iframe via javascript. It sounds
easy - but it won´t work...

The iframe is added to the document via someContainerElement.innerHTML
= "<iframe...>", it has name and ID and its visible in my DOM explorer
just as the table I need is it. The table is added from ASP.NET via
Response.Write().

I have tried both window.frames[], document.getElementById and even
document.getElementsByTagName, nothing has worked when the iframe is
involved...

It seems I cannot get af reference to the table in the iframe from the
parent document... ??

 

[Randy Webb]

Henrik Stidsen said the following on 5/1/2006 8:22 AM:

I am trying to access a table in an iframe via javascript. It sounds
easy - but it won´t work...

And as they say "Then you must not be doing something right"

The iframe is added to the document via someContainerElement.innerHTML
= "<iframe...>", it has name and ID and its visible in my DOM explorer
just as the table I need is it. The table is added from ASP.NET via
Response.Write().

It's irrelevant that it is added in ASP.NET, but, if you have ASP.NET
then why are you adding it to the document using client side scripting?
Just insert it with ASP.

I have tried both window.frames[], document.getElementById and even
document.getElementsByTagName, nothing has worked when the iframe is
involved...

It takes a combination

It seems I cannot get af reference to the table in the iframe from the
parent document... ??

window.frames['IFrameName'].document.getElementById('TableID');

If that doesn't work, post a URL to a sample page that shows the behavior.

 

[Henrik Stidsen]

I am trying to access a table in an iframe via javascript. It sounds

And as they say "Then you must not be doing something right"

And yet, it works when the table is added directly to the parent
document and not in the iframe - so something must be right somewhere

It's irrelevant that it is added in ASP.NET, but, if you have ASP.NET
then why are you adding it to the document using client side scripting?
Just insert it with ASP.

Its an old script being updated for a new world - I wish I could, but I
can´t (as in, it takes too much work...)

I have tried both window.frames[], document.getElementById and even
document.getElementsByTagName, nothing has worked when the iframe is
involved...

It takes a combination

Been there, done that - didn´t work either

window.frames['IFrameName'].document.getElementById('TableID');

No luck...

If that doesn't work, post a URL to a sample page that shows the behavior.

Unfortunately not possible at the moment...

I have a feeling that this ends with a lot of recoding...

 

[Randy Webb]

Henrik Stidsen said the following on 5/1/2006 8:41 AM:

And yet, it works when the table is added directly to the parent
document and not in the iframe - so something must be right somewhere

Well, something is still wrong and it is something else in your code
causing the problems.

Its an old script being updated for a new world - I wish I could, but I
can´t (as in, it takes too much work...)

I am not sure I buy into that one, but, ok.

I have tried both window.frames[], document.getElementById and even
document.getElementsByTagName, nothing has worked when the iframe is
involved...

It takes a combination

Been there, done that - didn´t work either

window.frames['IFrameName'].document.getElementById('TableID');

No luck...

Then something else in your code is breaking it.

Unfortunately not possible at the moment...

Why? Just a sample page. Or, sample code here.

I have a feeling that this ends with a lot of recoding...

It will, eventually, lead to recoding. It is not a matter of if, but when.


This script block:

<script type="text/javascript">
function newScriptElement(){
alert(window.frames['myIframe'].document.getElementById('myTable').innerHTML);
}
function addIFrame(){
document.getElementById('someContainer').innerHTML =
'<iframe src="blank2.html" name="myIframe"></iframe>';
}
</script>

With this HTML:

<button onclick="addIFrame()">Add IFrame</button>
<button onclick="newScriptElement()">Get Table</button>
<div id="someContainer"></div>

I added the IFrame using innerHTML and then got the table innerHTML from
blank2.html:

<table id="myTable">
<tbody>
<tr>
<td>My Table</td>
</tr>
</tbody>
</table>

That leads to the thought that something else in your page is screwing
it up.

 

[Henrik Stidsen]

That leads to the thought that something else in your page is screwing

it up.

That seems to be the problem

I have tried to call a function from the page in the iframe with the
table object as argument and it stille doesn´t work...
doStuffToTable(document.getElementById('tablethingy');

In a .js file "attached" to the parent page:
function doStuffToTable(t)
{
alert(t.id);
}

That much works just fine...

Then I call a function in the old code that writes to the table, adds
rows and cells, but the table is still empty...
I quess its something in the old code that can't handle DOM working
with the iframe = even more "research" in old confusing code, less
actual work...

 

[Randy Webb]

Henrik Stidsen said the following on 5/1/2006 9:31 AM:

That seems to be the problem

I have tried to call a function from the page in the iframe with the
table object as argument and it stille doesn´t work...
doStuffToTable(document.getElementById('tablethingy');

In a .js file "attached" to the parent page:
function doStuffToTable(t)
{
alert(t.id);
}

That much works just fine...

Then I call a function in the old code that writes to the table, adds
rows and cells, but the table is still empty...

How does it add rows and cells? innerHTML or appendChild? innerHTML
doesn't work real well with IE and in IE you have to appendChild to the
TBODY instead of the Table element. Or, you could use insertRow and
insertCell. But insertRow, in IE, is downright crazy:

<URL:
http://msdn.microsoft.com/library/d.../author/dhtml/reference/methods/insertrow.asp>

Yuck!

 

[Henrik Stidsen]

It uses insertRow and insertCell to build the table...

Since yesterday I have found out more about the problem.

The page in the iframe calls a function on the parent page. Argument is
an object, document.getElementById('myTable'), which works fine. From
the parent function I am able to alert the id of the object. So far so
good.
Next step is to change som properties on the table and delete some rows
(actually, changing their ID and setting visibillity to none). After
this, I cannot get myTable via document.getElementById so I try this as
a backup:

var tmpTbl = document.getElementById('listmultitable');
if(tmpTbl == null)
{
var iframes = document.getElementsByTagName('iframe');
var tables;
for(i = 0; i < iframes.length; i++)
{
tables =
iframes.document.getElementsByTagName('table');
for(j = 0; j < tables.length; j++)
{
if(tables[j].id == 'listmultitable'){newTbl =
tables[j]; j = tables.lenght; i = iframes.length;}
}
}
}

And well, tmpTbl is still null after this :/

I use the same function at another place in the app where its not in an
iframe and there is no problems at all there

 

[Dag Sunde]

It uses insertRow and insertCell to build the table...

Since yesterday I have found out more about the problem.

The page in the iframe calls a function on the parent page. Argument is
an object, document.getElementById('myTable'), which works fine. From
the parent function I am able to alert the id of the object. So far so
good.
Next step is to change som properties on the table and delete some rows
(actually, changing their ID and setting visibillity to none). After
this, I cannot get myTable via document.getElementById so I try this as
a backup:

var tmpTbl = document.getElementById('listmultitable');
if(tmpTbl == null)
{
var iframes = document.getElementsByTagName('iframe');
var tables;
for(i = 0; i < iframes.length; i++)
{
tables =
iframes.document.getElementsByTagName('table');
for(j = 0; j < tables.length; j++)
{
if(tables[j].id == 'listmultitable'){newTbl =
tables[j]; j = tables.lenght; i = iframes.length;}
}
}
}

And well, tmpTbl is still null after this :/

I use the same function at another place in the app where its not in an
iframe and there is no problems at all there

Your *backup* method sets 'newTbl', NOT 'tmpTbl'...

Could that be your problem?

 

[Henrik Stidsen]

Your *backup* method sets 'newTbl', NOT 'tmpTbl'...

Could that be your problem?

It could have been the problem - but now i've changed it to:
if(tmpTbl == null){ tbl = ntbl; } else { tbl = null; }

tbl being a "global" variable, ntbl being the object passed as argument
to this function. It gets me about 5 centimeters further in the
script...

It seems to me that the problem is that the table is not added to the
DOM tree or the DOM tree that the javascript uses is not updated when I
change the id of the table in the iframe. Could that maybe be the
problem ?
I use the developer toolbar for IE and the DOM tree that it has is
updated correctly.