Floatbox window can call function in parent?

Page: 1

Author Post
Member
Registered: Apr 2009
Posts: 81
After my Floatbox pop-up is finished doing what it is doing, I want to update the parent document with Javascript before I close the Floatbox. Not a refresh of the parent, I basically want to call a function that exists there. Is this possible? Or does browser security prevent one window from accessing Javascript in another?

Thank you!
Member
Registered: Apr 2009
Posts: 81
From what I understand, this should be possible as long as the main web page and the Floatbox are on the same protocol and domain (which they are in this case). But I don't fully understand the relationship between main web page and Floatbox, I know we use the reference "parent", but is it like an iFrame?

My main web page contains this:

function loadimage(){
$('#imageselected').load('https://www.domain.com/mfc_team-builder-loadimage.asp');
}

My Floatbox contains this:

$('#closebutton').click(function(){
parent.loadimage();
fb.end();
});

When #closebutton is clicked, I want to call the function loadimage() in the main web page and then close the Floatbox. The close Floatbox works (if I remove the loadimage() reference), but with the above code I get this error:

Uncaught TypeError: Object [object Window] has no method 'loadimage'

Does this help? I'm sorry if this is borderline a Javascript problem and not a Floatbox problem, but I think I am close to solving this. Would appreciate any advice. Thank you!
Administrator
Registered: Aug 2008
Posts: 3382
Apologies for the unusually slow response.

Yes, this is a javascript topic, not a Floatbox topic, but I'll throw a couple of comments in and hope they might help. There is no way for me to know the problem from the snippets and description outside the context of the page(s) that are running, so I'll just speak generally.

All browser javascript engines have four references to global window objects: 'window', 'self', 'parent' and 'top'.
'window' is the global object for the currently executing script. 'self' is an alias for 'window' and is always identical to 'window' for any given execution context.

Suppose we have a document that contains an iframe element, and that iframe element contains another iframe element nested inside itself. (The conversation holds for basic frames too, but we should not care about framesets any longer.) Call the base page win0, the first iframe win1 and the second iframe win2.

Within win0:
window == self == parent == top == win0

Within win1:
window == self == win1
parent == top == win0

Within win2:
window == self == win2
parent == win1
top == win0

All global objects, including global functions and variables, are properties of the window object. So, for example, if we reference the 'alert' function, we are really referencing 'window.alert'. From win1, 'alert' references its own alert function and is the same as 'self.alert' while 'parent.alert' references the alert function from win0's global context.

For your particular case, I can't comment. It looks like it's probably jQuery (it's not Floatbox), and I have no clue as to the structure of your pages, the presence of iframes, or the context in which the code is defined and executed. The .load function looks fishy to me though because jQuery's load function takes a function as its arguments, not a URL string.
Member
Registered: Apr 2009
Posts: 81
Thank you for your help and the explanation. I found what was happening. Apparently, the fb.end(); was happening too fast, before the function called. I added a 200 MS timeout in-between the function call and the fb.end();, that appears to have fixed this.

Thanks again!

Page: 1