DOM - get element in Iframe from parent document

Discussion in 'Javascript' started by Henrik Stidsen, May 1, 2006.

  1. 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... ??
    Henrik Stidsen, May 1, 2006
    #1
    1. Advertising

  2. Henrik Stidsen

    Randy Webb Guest

    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.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 1, 2006
    #2
    1. Advertising

  3. >> 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" :)


    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 :(

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


    >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...
    Henrik Stidsen, May 1, 2006
    #3
  4. Henrik Stidsen

    Randy Webb Guest

    Henrik Stidsen said the following on 5/1/2006 8:41 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" :)

    >
    > 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.

    >> 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 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 :(
    >
    >>> It seems I cannot get af reference to the table in the iframe from the
    >>> parent document... ??

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

    >
    > No luck...


    Then something else in your code is breaking it.

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

    >
    > 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.
    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 1, 2006
    #4
  5. >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...
    Henrik Stidsen, May 1, 2006
    #5
  6. Henrik Stidsen

    Randy Webb Guest

    Henrik Stidsen said the following on 5/1/2006 9:31 AM:
    >> 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...


    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/default.asp?url=/workshop/author/dhtml/reference/methods/insertrow.asp>

    Yuck!

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 1, 2006
    #6
  7. 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 :(
    Henrik Stidsen, May 2, 2006
    #7
  8. Henrik Stidsen

    Dag Sunde Guest

    "Henrik Stidsen" <> skrev i melding
    news:...
    > 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?

    --
    Dag.
    Dag Sunde, May 2, 2006
    #8
  9. Dag Sunde wrote:

    > 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.
    Henrik Stidsen, May 2, 2006
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jari Kujansuu
    Replies:
    2
    Views:
    988
    Jari Kujansuu
    Sep 30, 2003
  2. Daedalous
    Replies:
    3
    Views:
    658
    Daedalous
    Jan 16, 2004
  3. Replies:
    0
    Views:
    124
  4. Replies:
    0
    Views:
    119
  5. Roy
    Replies:
    1
    Views:
    86
    Danny
    Nov 8, 2006
Loading...

Share This Page