Iframe inside close - Is there a better way?

[RationalRabbit]

Hi!
My page has a list of products. Clicking on one of these product images brings up a detailed information iframe popup with interactive photos and text. The information is stored in a MySQL database, accessed with PHP.

I've struggled for hours to find the best way to open and close this iframe. The below method works, but is slow. I'm wondering if there is a way to do this that will pop up the iframe with its content faster.

Parent Page Head:

function OpenFrame(ID)
      {
         newID = ID;
         var makeframe=document.createElement("iframe");
         makeframe.setAttribute("id", "PopIframe");
         makeframe.setAttribute("class", "PopIframe");
         makeframe.setAttribute("name", "PopIframe");
         makeframe.setAttribute("frameborder", "0");
         makeframe.setAttribute("src", "detailbox.php?ID=" + newID);  // ID=Database record ID for item search
         makeframe.setAttribute("scrolling", "no");
         document.body.appendChild(makeframe);
      }

      function ClosePopup()
      {
           var ifr = parent.document.getElementById("PopIframe");
           ifr.parentNode.removeChild(ifr);
      }

In detailbox.php:

<a class="CloseLink" href="javascript:void(0);" onclick="window.parent.ClosePopup();">X</a>

The product has a series of styles, so once detailbox.php is open, the user may select other product information in the series by selecting an image, which recalls the page in the iframe with a different database ID get.

Currently, on my computer, with a good broadband connection, this takes about 3 seconds for a page to load in the iframe. I'm hoping there is some way to make it snappier.

[Fungus1487]

why not hide/show the iframe instead of creating a new instance each time.

i.e.
on page startup create a hidden iframe
when openframe is called change the visibility and use document.frame.location = '.....' to change the url.

if your using php also depending ont he amout of code the server will have to compile, run and show the results of whatever your doing. You can try using zend or something to precompile the php that may increase performance.

also

makeframe.setAttribute("class", "PopIframe");

is not compatible with all browsers, some use className as i am aware

[RationalRabbit]

Fungus -

Thanks much for the tip on "class" vs "classname". I'll check that out.

Originally, I was simply hiding/unhiding the iframe. Besides a simple JavaScript routine to The method I used was the following:

function OpenPopup()
      {
         z = document.getElementById('PopIframe');
         z.style.display = "block";
      }
  
     function AddID(ID)
      {
         newID = ID;
         x = document.getElementById('PopIframe');
         x.src = (x.src + "?id=" + newID);   // ID for database lookup
      }
 
      function ClosePopup()
      {
         y = document.getElementById('PopIframe');
         y.style.display = "none";
      }

The problem here was that when I would reopen the iframe, the first thing I would see was the last iframe content. No matter what order I put things in, as far as calling up the selected content and unhiding the iframe, the result was still the same; old content - blip - new content. Destroying then rebuilding the frame, of course, eliminates that, but as I say, is a bit slow. I tried some method (sorry - no notes) that was supposed to clear any cache, but no acceptable result.

[Fungus1487]

you could always create an html page with a prompt something ike 'Loading.. Please wait' and upon hiding your iframe change the location to ths page.

then when opening the iframe they will see a lovely message awaiting them.

in my opinion

document.framename.location = 'url';

is faster than accessing its src attribute node but i am unsure and probly would save u 10th's off a second.

[~s.o.s~]

> some use className as i am aware
Almost all browsers out there support className. IE doesn't play well with setAttribute so it's wise not to use it.

> document.framename.location = 'url';
IFrames don't have a property named as location. Use the src property instead.

[Fungus1487]

i stand corrected.