Hi

I have an application where I have severall page level.
Page1 has Page2, Page2 has Page3 and Page3 calls floatbox with Page4 inside.
From my page4 I can call javascript functions on Page1, but I cannot call any function on Page3. I try this on IE and Firefox.

Regards

Hi

I made a few tests and if I replace floatbox.js with framebox.js, this works fine, I can reach any page level.

Regards

Hi Quim,

Your observation about framebox.js makes sense. The difference between framebox.js and floatbox.js is that framebox attaches to the current window while floatbox attaches to the top window. I'm referring to an iframe hierarchy here. If there's only a single flat page then there is no difference between floatbox and framebox. When framebox attaches itself to an iframed window, the resulting floatbox display will cover only that iframe region and will not cover the whole browser window.

Let's pretend you've loaded floatbox.js (or you're running some other code from page1) and you want to access something on your page3. The trick is to get the window object for the page3 iframe. Start by getting page2's iframe element on page1. Easiest is to give it an ID (I'll use "iframe1") when creating it, and then fetch it using this id.
iframe1 = top.document.getElementById('iframe1');


Now that we've got the iframe element, we can get the document and window nodes for the page inside that iframe. The best cross-browser way I've found to do this is:
doc2 = iframe1.contentDocument || iframe1.contentWindow;
doc2 = doc2.document || doc2;
win2 = doc2.defaultView || doc2.parentWindow || doc2.contentWindow;
The first line will return the iframe's document node in some browsers or its window node in others. The second line gets the document node for those browsers that returned the window node in the first line. And lastly, the third line gets the window node from the document node. (This last line does not work in Safari 2.x.)

Now you've got the window object for page2. You can call functions from that page, including the calls to get the nodes for your page3. Assuming you've given your second iframe (containing page3) an id of "iframe2":
iframe2 = doc2.getElementById('iframe2');
doc3 = iframe2.contentDocument || iframe2.contentWindow;
doc3 = doc3.document || doc3;
win3 = doc3.defaultView || doc3.parentWindow || doc3.contentWindow;
With doc3 and win3 you can access the DOM and javascript functions in your iframed page3.

Just so no-one reading this thinks "Man, floatbox is stupidly complicated to use!" please note that the above coding has nothing to do with floatbox. I'm just trying to help out with the general problem of accessing different windows in an iframe hierarchy via javascript. Also, if you think you need Safari 2.x support (surely no more than 5 people are still using this browser???), take a read of http://code.google.com/p/doctype/wiki/ArticleParentWindow