Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Practice Script - Iframe Interaction

    When you assign an element of a window to a variable with getElementById() or getElementByName(), that variable is referring to an Element Object that is a property of the Window Object. This behavior is not true for frames, however; the value of the name or ID of a frame element refer to a Window Object as opposed to an Element Object.

    This means that you can treat that frame in your code as if it were its own Window Object using the Name or ID that you have assigned to that frame. I provide an example below.

    HTML
    The id "fone" given to this <iframe> Element does not refer to an Element Object, it refers to a Window Object.
    Code:
    <p style="color:blue" onClick="chngFrameStyle();">Click Me</p>
    <iframe id="fone" src="OreillyCh14v2Iframe.html" width="50%" height="400px" ></iframe>
    JavaScript
    fone is treated as a Window Object. This Window Object has an Element Object with the id "iframewrap" that will be assigned a backgroundColor value of #444.
    Code:
    function chngFrameStyle() {	
    	fone.document.getElementById("iframewrap").style.backgroundColor = "#444";
    }
    Before Click

    http://www.flickr.com/photos/77924248@N02/7145489961/


    After Click

    http://www.flickr.com/photos/77924248@N02/6999402854/

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    What is the browser restriction for this? It does not work for Firefox 12 at all!
    Code:
    fone is undefined
    And with document.getElementById('fone').document I also get an exception
    Code:
    document.getElementById('fone').document is undefined
    Usually you'll have to use .contentWindow or .contentDocument to get the respective window or document object from inside the iframe!

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    What is the browser restriction for this? It does not work for Firefox 12 at all!
    Code:
    fone is undefined
    And with document.getElementById('fone').document I also get an exception
    Code:
    document.getElementById('fone').document is undefined
    Usually you'll have to use .contentWindow or .contentDocument to get the respective window or document object from inside the iframe!
    Can you post the entire code so we can have a look see. I've only tested in FF 8.

    Also the error "document is undefined". Isn't that pretty much impossible. Document is always defined right? If document is undefined then there is no way to define a variable to any of that documents properties. Which pretty much renders client-side scripting useless.
    Last edited by FutureWebDev; 05-06-2012 at 05:40 PM.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    It's not "document" which is undefined, it's rather the document property of your "fone" element.

    Where did you define the fone element by the way? It's not mentioned in your code ...

    I guess your code is highly depending on IE

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,914
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    In IE9 I get "access is denied".

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    See below
    Last edited by FutureWebDev; 05-07-2012 at 07:55 PM.

  • #7
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok I think I may need to take this post down. For some reason this isn't working now. Weird. I swear it worked. Let me play. If I can't figure it out by this evening I'll take down the post.


    Sorry.

    FWD

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    You can’t take down anything, you have to ask one of us.

  • #9
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok so the problem with this is that I need to take out any references to ID and keep only references to name.

    You can reference with name but not ID.

    So instead of:


    Code:
    <p style="color:blue" onClick="chngFrameStyle();">
    			Click Me
    		</p>
    		<iframe id="fone" src="OreillyCh14v2Iframe.html" width="50%" height="400px" ></iframe>
    Change id to name:
    Code:
    <p style="color:blue" onClick="chngFrameStyle();">
    			Click Me
    		</p>
    		<iframe name="fone" src="OreillyCh14v2Iframe.html" width="50%" height="400px" ></iframe>
    That should take care of it. Mods is there anyway I can edit my original post?

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Works also in FF 12 ... I am surprised. I did not know that the chained notation with name attributes includes a document property for an iframe. You never stop learning ...

  • Users who have thanked devnull69 for this post:

    FutureWebDev (05-08-2012)

  • #11
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    Works also in FF 12 ... I am surprised. I did not know that the chained notation with name attributes includes a document property for an iframe. You never stop learning ...
    Yep. Thanks for testing again devnull69.


  •  

    Tags for this Thread

    Posting Permissions

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