SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple reference of object inside iframe - HOW!!

    I simply need to reference an object inside an iframe:

    I need it to work on all browsers as I understand this is difficult for this type of command.

    Why does the below code not work in ANY browser let alone all of them.

    I have tested in IE8 and FF3 (not IE7).


    file1.html
    ---------
    <iframe name="iframe1" id="iframe1" src="file2.html"></iframe>
    <script>
    parent.iframe1.form1.obj1.disabled=false;
    </script>


    file2.html
    ---------
    <form action="" name="form1" id="form1" method="POST">
    <input type="button" name="obj1" id="obj1" disabled=true value="BUTTON" />
    </form>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Perhaps the following information about iframes will help.
    http://www.jr.pl/www.quirksmode.org/js/iframe.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, this doesn't do it (thanks anyway).

    The document talks about changing the file inside the iframe. I want to change an object inside the iframe.

    The code below will change the file, but I can't expand on it:
    parent.document.getElementById('iframe1').src = "newpage.html";


    I have tried:
    parent.document.getElementById('iframe1').document.form.object.value
    parent.document.getElementById('iframe1').form.object.value
    parent.document.getElementById('iframe1').getElementById('object').value
    ...but none work

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Is the iframe on a different domain, or a sub-domain from the main page?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, same domain / folder everything

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're in the parent window, then you don't need to use the parent object. You are the top of the heiarchy already.

    Code:
    document.getElementById('iframe1').document.getElementById('object').value
    should work fine. Of course, the iframe must finish loading before you can access its contents. window.onload would be an easy way to ensure that.

    Also, the src must be of the same domain.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Another possibility is to pass the new swf as a querystring pararmeter to the iframe, and have the page within the iframe retrieve it from the querystring.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried all your advice.

    http://www.page-test.co.uk/test1.html
    http://www.page-test.co.uk/test2.html

    A demo is here, you can see the source. It just doesn't change.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Use the frames reference instead.

    Code javascript:
    window.frames['iframe1'].document.getElementById('obj1').innerHTML = 'YES, changed';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have worked it out:

    go back to the script I first posted
    parent.iframe1.form1.obj1.disabled=false;

    and change to

    parent.iframe1.contentWindow.form1.obj1.disabled=false;

    "contentWindow." was the missing bit.

    I have updated my test1.html / test2.html pages and it works.

    Thanks for all your help.

  11. #11
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.getElementById('iframe1').contentWindow.document.getElementById('object').value = 'Changed';
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •