Persist a xul iframe document after hiding/showing it

safiel · Post by **safiel** » April 10th, 2008, 6:49 pm

Here's the situation, I've got a popup overlay that has a iframe used to load a url and has a few other things in it (like some buttons). I have a button in the browser that will popup the overlay when pressed. It looks something like this:

<window>
<vbox>
<stack>
<iframe>
.... some other xul elements
</stack>
</vbox>
</window>

The css style of the vbox is set up so that it it centered in the browser on top of everything.

I want to allow the overlay to be associated with a particular tab so that the user can play around with the contents of the iframe, switch tabs, return to the original tab and NOT have the iframe reload the webpage it is set to. It would also be ok, if there was only one instance of the popup at any one time (ie.. I only need to be able to bring the overlay back above the browser content after swapping tabs).

I've tried pretty much everything I could think of and here's what I've found:
* Swapping tabs hides the overlay behind the new webpage content.
* setting hidden=true followed by hidden=false later on will reload the webpage in the iframe.
* Removing the iframe from the overlay (or the overlay from its parent) and re-adding it as a child, causes the iframe to reload the website. - this was an attempt to get the overlay above the tab that was hiding it.. which worked in bringing it to the top.. but it reloaded the iframe content.
* Modifying the zindex of the overlay does nothing.
* Tried making the overlay part of the tab itself instead of the whole main-windox... which didn't work at all.

So basically I'm looking for any one of the following:
* How to hide then show a iframe without it reloading the website it's pointed to?
* A method to bring the overlay from behind the browser page that is on top of it without causing it to reload.
* A way to save the iframe state and reload it at a later date (style, js, ajax calls to the server still need to work!).

max1million · Post by **max1million** » April 11th, 2008, 4:01 am

What about adding the iframe into the page?
Or the .parentNode of the tab's browser?

safiel · Post by **safiel** » April 11th, 2008, 8:45 am

Isn't it not the best idea to add a xul element to a html document?? - I'll give this a try though in a hour or so.

Adding to the parent node of the tab's browser doesn't seem to work, already tried.

max1million · Post by **max1million** » April 11th, 2008, 9:49 am

Maybe instead of hidden just set the height to 1px? outside the tabbrowser?

Web pages also use iframe. It would be just another element in the page.

In FF2 I loaded an iframe in the notifcationbox with google and switched tabs. It was still there when I switched back. I noticed the back button had no effect on the iframe. Didn't play with it much after that. Didn't try FF3.

safiel · Post by **safiel** » April 11th, 2008, 11:57 am

I am using a xul iframe that is wrapped in a vbox, not a html iframe. Although i could modify the html of the page that you are on, I'd rather not do that because the results could be problematic. Some sites may use different z-indexes, div ids, events that could potentially mess with the modification I want to make.

As I said in the original post. I tried making the xul vbox a part of pretty much every logical place I could think to make it a part of (browser, tab, group of tabs).

I don't understand what you mean by: "In FF2 I loaded an iframe in the notifcationbox with google and switched tabs. It was still there when I switched back. I noticed the back button had no effect on the iframe. Didn't play with it much after that. Didn't try FF3." Do you mean you modified the google document to include your new iframe? because I could see that working fine, however it's not what I want to do.

max1million · Post by **max1million** » April 11th, 2008, 12:41 pm

I don't know if any of your elements are supposed to be existing or where in the DOM they are supposed to be since there's no id on them. I can only guess just above or below the tabs. But if changing the height (not technically hiding it) or .collapsed, or one of the style properties, visibilty, display etc., instead of hidden don't work ...

perhaps
FF2 = Firefox 2. To add an iframe only to current tab's/browser's notificationbox using script:

Code: Select all

var b = gBrowser.mCurrentBrowser;
var x = document.createElement("iframe");
x.height = "150px";
b.parentNode.insertBefore(x,b);
x.contentDocument.location.href = "http://google.com";

It's just below tabs. To remove it from current tab's/browser's notificationbox using script:

Code: Select all

var b = gBrowser.mCurrentBrowser;
if (b.previousSibling && b.previousSibling.nodeName == 'iframe')
   b.parentNode.removeChild(b.previousSibling);

If you mean inside a <popup/> element I think your out of luck.

safiel · Post by **safiel** » April 11th, 2008, 1:15 pm

Yeah, I think this is where you're misunderstanding my problem. I'm using a xul element iframe inside of a xul vbox and not modifying the page dom. I want to be able to show this overlay without modifying the page the user is on.

Sorry let me fix the xul code I posted before.

Code: Select all

  <window id="main-window">
    <vbox id="statsmodal" hidden="true" pack="center">
        <stack>
            <iframe id="statsmodal-content" src="about:blank" context="contentAreaContextMenu"/>
            ... some other elements.
        </stack>
    </vbox>
  </window>

#statsmodal
{
    background-color:#FFFFFF;
    border: 2px solid #CCCCCC;

    -moz-border-radius: 3px 3px 3px 3px;
    position:fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

So later on I call statsmodal.src = "someurl" and statsmodal.hidden = false; and it shows fine. but when you change tabs it gets hidden behind the new tab.

_development · Post by **_development** » April 12th, 2008, 11:12 am

but when you change tabs it gets hidden behind the new tab.

Try re-appending the vbox .

Code: Select all

   var old= document.getElementById("statsmodal");
   var new= document.getElementById("statsmodal").cloneNode(true);
   document.getElementById("main-window").removeChild(old);delete(old);
   document.getElementById("main-window").appendChild(new);

safiel · Post by **safiel** » April 15th, 2008, 12:36 pm

Your suggestion is very similar to something I originally tried, but I gave it another shot with the exact code you posted and it's a no go. The iframe inside of the vbox is clearly being reloaded once it gets appended to the main-window (if there was a text box/check boxes etc on the screen they are back to their original state and the web vbox appears right away while the iframe part of it takes a second or two).

Any other suggestions? This seems like something that should be very simple to do... or at least be possible to do.

gyll · Post by **gyll** » April 19th, 2008, 3:46 am

it's definitely possible to do, and there are at least two extensions that do it (you might want to check them out), and each of these two does it differently: one of them is GSpace (this one actually "blinks" when you switch tabs, so it probably "repaints" the window), and Google Notebook (this one is not blinking, and while you drag the firefox window the extension window is NOT dragged, which means it definitely uses a different trick). If you manage to find out how they do it let us know

PS
In fact the Google notebook extension is pretty much just a browser pop-up window and not much more, the functionality is almost all ajax.

max1million · Post by **max1million** » April 19th, 2008, 5:29 am

openDialog('about:mozilla', '', 'chrome,height=400,width=400,centerscreen,resizable,dependent', '');
http://developer.mozilla.org/en/docs/DOM:window.open
http://developer.mozilla.org/en/docs/DO ... openDialog

safiel · Post by **safiel** » April 20th, 2008, 1:57 pm

@gyll
Thanks I'll look into both those extension and see what they're doing.

@max1million
That will popup a dialog window, but that's not what the goal is. The goal is to add a popup that is part of the browser (like google notebook), not a new window.

max1million · Post by **max1million** » April 21st, 2008, 12:06 am

"... when you switch tabs .. Google Notebook (this one is not blinking, and while you drag the firefox window the extension window is NOT dragged..."

that describes that dialog (openDialog) or window (open), and it is dependent on the window that opened it

the blinky one likely re-appened, or appended to each page (and removed), but just a guess

safiel · Post by **safiel** » April 21st, 2008, 12:36 pm

Ah, you are right. They are just making it appear to be part of the window. What a messy little hack, I bet they would have loved to just be able to have a browser on top of the other browser that didn't get hidden when switching tabs. I have to do something a bit different thing they are, which I think I can get working but too bad it's more complex (modals per tab and such). thanks all.

max1million · Post by **max1million** » April 22nd, 2008, 9:43 pm

Per tab dependent you might try to set collapsed or re-set height and width and position so it appears to hide, but setting hidden I'm sure will cause the docshell and such to be destroyed (make it reload). Maybe tied in with TabSelect ,TabOpen, TabClose and a property on the tab for the associated window. But a modal window/dialog wouldn't allow you to switch tabs.

A modal per tab would lead me back to the idea of adding a div to the page with whatever and your own style. Stretch a transparent/semi-transparent background image over the page to make it modal, with a smaller div inside for the rest. Using an event listener in extension would allow the extension to know what button is clicked, and get around user pref for javascript in pages being disabled. As part of he page it shouldn't reload. Though you don't want it in the page.

But they just random ideas.