jQuery dialog iframe loading once in IE and twice in other browsers?

Question

I have a jQuery dialog whose content is defined by an iframe. Until the dialog is displayed, the content of this iframe is invisible. In IE, this content and its associated javascript is executing, so that when the dialog is displayed, it is evident that the javascript has already completed all its loading work. But in non-IE browsers like Firefox and Chrome, this iframe is, again, executing its javascript before the dialog is visible, but then apparently re-executes it when the dialog is shown.

Because this is a fairly expensive iframe to create (lots of javascript executes with ajax calls and all), I don't want the browser to pay the cost of initializing it twice. In fact, I might say I want to delay initializing it until the dialog is actually brought up. But whether it initializes before it's brought up and then preserves that initialization (as IE is doing) or it just delays initialization until the dialog is visible, I could settle for either.

What I can't settle for is what I'm seeing now, where non-IE browsers initialize twice, with the first time being a total waste since they're reinitialized when the dialog appears.

The page I'm referring to: http://openidux.dotnetopenauth.net/. You can repro the behavior by clicking the Login link in the upper-right corner.

Thanks.

Answer 1

I haven't taken a deep look into the link, but what kind of onload event are you using to initialize the IFRame? Could it be a onDomLoad / onLoad issue?

Answer 2

I ended up setting the iframe.src property to "about:blank" initially, and only set the source when the dialog actually pops up. And then, to avoid it reloading when the dialog hides (stupid, I know), I set it back to about:blank.

$(document).ready(function() {
 $("#loginDialog").dialog({
  close: function(event, ui) {
   // Clear the URL so Chrome/Firefox don't refresh the iframe when it's hidden.
   iframe.src = "about:blank";
  },
  open: function(event, ui) {
   iframe.src = loginContent;
  },
 });
});