...

View Full Version : Whats the difference between parent, opener, and top?



SpiritualStorms
07-09-2004, 07:20 AM
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

glenngv
07-09-2004, 01:44 PM
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?

SpiritualStorms
07-13-2004, 08:33 AM
I think i got it, but i want to go over some of the actual details to make sure.


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,



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,


parent.frames[ 0 ].document.body.innerHTML


I dont know, it seems like there's an excess of the same object.

glenngv
07-13-2004, 01:07 PM
Maybe you need something visual.

http://developer.netscape.com/viewsource/archive/goodman_frames.html

SpiritualStorms
07-14-2004, 05:23 AM
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.

glenngv
07-14-2004, 07:20 AM
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:


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

SpiritualStorms
07-14-2004, 07:32 AM
Interesting. So top is better since it would cut down on how many times you would have to repeat the term parent?

Interesting.

SpiritualStorms
07-14-2004, 07:45 AM
Taking your tree example, i would do this,




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,



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


?

Or i could do something like,



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,



var root = opener.document.propertyWhatever.valueWhatever

?

glenngv
07-14-2004, 07:57 AM
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.

SpiritualStorms
07-15-2004, 10:41 AM
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:


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:


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?

glenngv
07-15-2004, 02:16 PM
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+")";
}
}

SpiritualStorms
07-15-2004, 08:58 PM
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.


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.


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.

glenngv
07-16-2004, 03:24 AM
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;

SpiritualStorms
07-16-2004, 06:24 AM
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.

dmbware
11-08-2007, 11:37 PM
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..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum