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 15 of 15
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Whats the difference between parent, opener, and top?

    I was reading some stuff on the window object, and some of the definitions were not totally clear to me.

    Is parant basically for the frame-set that has the file that launches a window? In other words, lets say i have a frame-set, and maybe 2 additional files for each frame. One frame will be called Menu, and the other frame will be called Display. Is parent here then for the frameset itself? Or for one of the actual files that might have launched the mini-window?

    I am having a hard time understanding how parent differs from top.

    Opener refers to the actual file that launches the mini-window, correct?

    Top is for when you have frame-sets with-in frame-sets, correct?

    If i am working with frames, do i always have to use a syntax similar to this, parent.opener.window.frame["framename"].document, or can i simply cut it down to something like, opener.window.frame["framename"].document?

    And in case you are wondering, i was reading from here:
    http://www.javascriptkit.com/jsref/window.shtml
    LovesWar

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    top, parent, opener (as well as window, self, and iframe) are all window objects. The differences are described below:

    top = this is topmost window, if you're using frames, this is the frameset window, if not using frames, this is the same as window or self

    parent = this is the parent frame of the current frame or iframe. The parent frame may be the frameset window or another frame if you have nested frames. If not using frames, parent is the same as the current window or self

    opener = this is the window that opens or launches the current popup window.

    Does that make sense to you?

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think i got it, but i want to go over some of the actual details to make sure.

    Code:
    top  = this is topmost window, if you're using frames, this is the frameset window, if not using frames, this is the same as window or self
    
    parent  = this is the parent frame of the current frame   or iframe. The parent frame may be the frameset window or another frame if you have nested frames. If not using frames, parent is the same as the current window or self
    
    opener  = this is the window that opens or launches the current popup window.
    
    Does that make sense to you?
    If i am understanding your above explanations, i would use top, if i want to target any frame that is not exactly the actual frame, or file, that has launched my mini-window, correct? Top, then, in a certain sense, would be like the root of a framed set-up, which would be the frameset file itself, and not necessarily a particular frame, correct? I am however inclined to think that top is only useful when you have framesets within framesets, otherwise, i dont see how top would be different from parent.

    Parent, on the other hand, would be like one of the particular frames? I am not sure i understand how this would differ from Top. If top goes to the frameset file itself, then how would i use parent? What constitutes a parent frame? To me, a frameset file, would be like the parent sense without it, you dont have frames. So what is a parent frame? Is it a frame that has the power to control, or affect other frames?

    Opener seems pretty self-explanitory. Its the actual frame that contains the very file that launches a mini-window.

    At any rate, suppose i have a frame setup, and in one of the frames, i display my webpages. How would i create a mini-window that would be launched from a particular file, from the display window, and have the mini-window for example affect the file that launched it? Suppose i wanted to affect the background image of the page that launched the mini-window?

    I would do something like,

    Code:
    var launcher = top.parent.opener.document;
    
    launcher.styles.backgroundImage= "whatever"
    When do i use the frames array for something like the above?

    Would i do something like,

    Code:
    parent.frames[ 0 ].document.body.innerHTML
    I dont know, it seems like there's an excess of the same object.
    Last edited by SpiritualStorms; 07-13-2004 at 08:00 AM.
    LovesWar

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts

  • #5
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I checked out the page. I was right. Top is mainly useful for when you are dealing with framesets within framesets, otherwise, parent is like the root of a hierarchy. I thought they sounded the same. They are almost interchangeable.
    LovesWar

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    To clearly see the difference and similarity of top and parent, imagine the figure below.
    Think of it as a family tree with the following hierarchy:
    Code:
             Glenn
               |
        ----------------
        |               |
       John           Paul
        |
      --------
      |       |
    Mary   Peter
      |      |
    Annie   Mark
    - In order for John to refer to his parent who's Glenn, he just have to say parent or top. Same for Paul.
    - John referring to Paul: parent.frames['Paul'] or top.frames['Paul']
    - Mary to Glenn: parent.parent or simply top
    - Mary to Peter: parent.frames['Peter'] or top.frames['John'].frames['Peter']
    - Mark to Glenn: parent.parent.parent or simply top
    - Mark to Mary: parent.parent.frames['Mary'] or top.frames['John'].frames['Mary']
    - Mark to Paul: parent.parent.parent.frames['Paul'] or simply top.frames['Paul']
    - Annie to Mark: parent.parent.frames['Peter'].frames['Mark'] or top.frames['John'].frames['Peter'].frames['Mark']
    - ...

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Interesting. So top is better since it would cut down on how many times you would have to repeat the term parent?

    Interesting.
    LovesWar

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Taking your tree example, i would do this,

    Code:
                    Frameset_file
                            |
               ----------------------
               |                    |
       Menu_frame              Display_frame
                                    |
                                Mini_Window launched
    If i want to control the file that is displayed in the Display_Frame from the Mini_Window, i would do something like,

    Code:
    var root =  parent.frame[Display_Frame].document.propertyWhatever.valueWhatever
    ?

    Or i could do something like,

    Code:
    var root =  top.frame[Display_Frame].document.propertyWhatever.valueWhatever
    ?

    But if i didnt have frames, i would just use the opener property/object, correct? Something perhaps, like this,

    Code:
    var root =  opener.document.propertyWhatever.valueWhatever
    ?
    Last edited by SpiritualStorms; 07-14-2004 at 06:59 AM.
    LovesWar

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    popup windows are outside that tree structure. You're right, you need to use opener.

    opener.document.propertyWhatever.valueWhatever

    Since the Display_frame is the one that opens the popup window and it is the frame you want to be controlled, the opener there refers to the Display_frame itself. But let's say you want to control Menu_frame from the popup window, you would do:

    opener.parent.frames['Menu_frame'].document.propertyWhatever.valueWhatever

    or:

    opener.top.frames['Menu_frame'].document.propertyWhatever.valueWhatever

    Notes on using top (from the link I posted earlier)
    It's important to avoid using the top object in references when parent will suffice. You'll never know when some other Web site loads your pages into one of its frames. In that scenario, the other site's framesetting document is the top of the hierarchy. Any reference you make to top.functionName intended for your own little kingdom will fail when the page is hosted by a foreign top document. The parent-child relationships within your documents are intact, so all valid references among your parent and its children will work fine.

  • #10
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, i made a copy of a file, and altered the copy so that i could test things out, and well, out of the 2 functions i have, only one seems to work. I have created, a parent, and a child file. The child file is aimed to control, and alter the parent file. To do this, i wanted to alter the backgroud color of the parent file, and the table color of the parent file. Here's what i have:

    Code:
    function changeTableColor(target, obj)
    {
    
    var maincell;
    
    mainCell=opener.document.getElementById(target).style;
    
    if(obj)
      {
       theLink = obj.selectedIndex;
    
       mainCell.backgroundColor=obj.options[theLink].value;
      }
    
    }

    The above works like a charm. I almost fell off my chair. But the function that supposed to alter the background image, well, it doesnt work at all. Here's the code:

    Code:
    function changeBackground(obj)
    {
    
    var theObj;
    var theLink;
    
    theObj=opener.document.body.background; 
    
    if(obj)
      {
        theLink = obj.selectedIndex;
    
        theObj.background=obj.options[theLink].value;
      }
    
    }
    The only things i did to the above scripts really, was throw in the word opener in front of the term document, in order to create the path to the very target i was interested in affecting, which was some tags of the parent file. Yet, in one function, the alteration did not render the function usueless, but in the other, the slight alteration some how killed the function. Any ideas as to why that is?
    LovesWar

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    function changeBackground(obj)
    {
        var theObj;
        if (opener && !opener.closed){ //make sure opener window is still open
           theObj = opener.document.body; 
           theObj.style.backgroundImage="url("+obj.options[obj.selectedIndex].value+")";
        }
    }

  • #12
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great, it works. But i dont understand why it does. I didnt really use the backgroundImage CSS property on another example, but i did on this one.

    Code:
    function changeBackground(obj)
    {
    
    var theObj;
    var theLink;
    var theValue;
    
    
    theObj = opener.document.body; 
    theLink = obj.selectedIndex;
    theValue="url("+obj.options[theLink].value+")";
    
    if(obj)
      {
        theObj.style.backgroundImage=theValue;
      }
    
    }
    I dont understand why the above worked, when i have the same script, sort of, on a different page, where i affect the webpage directly, rather than using a pop up to affect the parent window.

    Code:
    function changeBackground(obj)
    {
    
    if(obj)
      {
        theLink = obj.selectedIndex;
    
        document.body.background=obj.options[theLink].value;
      }
    
    }
    Notice how i do not use the properties style, or url() in the second script above, and yet, it works, when its directly on the file i want to affect. It doesnt work however, when i am using a child window, like a popup to affect the parent window.
    LovesWar

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    This is the old way of declaring presentational attributes of the document:

    <body background="backg.jpg" color="blue" bgcolor="red">

    That can be accessed through:

    document.body.background
    document.body.color
    document.body.bgColor

    That's what you did in your 2nd script. That's already deprecated but still supported by browsers for backward compatibility.

    With the advent of CSS, things has changed. The equivalent of the above markup is:

    <body style="background-image:url(backg.jpg); color:blue; background-color:red">

    That can be accessed through:

    document.body.style.backgroundImage
    document.body.style.color
    document.body.style.backgroundColor

    So don't be left behind by the times, learn and use the new ways of doing things.

    Now on your last concern of why your 2nd script didn't work for popup window, just add the opener object to refer to the opener window and it will work.

    opener.document.body.background=obj.options[theLink].value;

  • #14
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    Now on your last concern of why your 2nd script didn't work for popup window, just add the opener object to refer to the opener window and it will work.
    
    opener.document.body.background=obj.options[theLink].value;
    You mis-understood my comments. The first script you gave me is what i am using when it comes to controlling a parent window through a child window. But what i didnt get is how i had to alter the script for all the reasons you said. I guess whether or not i like it, i better get in the habit of using CSS for any definitions, or properties eh?

    But yea, i did use the opener property, and it wouldnt work. Thats' when i had to use what you gave me.
    LovesWar

  • #15
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Have a problem wiht iframe

    I have a index page with an iframe.. When clicking on a link within the iframe, I get a new window. User has an option to just close window or close and go to a new location... Here is my code

    window.opener.location='/BestBuyIDX.html';

    parent.opener.focus ();
    parent.window.close ();

    Everything works fine, however the bestbuy page opens in the iframe... How do I make the bestbuy open over the index page..


  •  

    Posting Permissions

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