Is there a way to do hidden IFRAMEs?

**Doug_Dyer** · 11-25-2002 04:10 PM

A little background:
I have a page that has certain database items represented in IFRAMEs (one per item) that are reloaded at a periodic rate (say, once every 5 seconds). These "database items" represent a database at the server and we wish to monitor these items as they change in real time without having to reload the entire page. Therefore the reload "pulls" new values onto the screen without having to reload the entire page.

The question:
The flicker is very noticable, so I thought Id look into a way to have a hidden IFRAME and a visible INPUT type and just have the refreshing done off-screen, then javascript can compare the values and if they have changed, assign the new value to the visible INPUT item.

Is there a way to create hidden IFRAMEs? I have IE6 , so layers are out.

Thanks in advance,
Doug

**Rick Bull** · 11-25-2002 04:58 PM

Try <iframe style="display:none;">

**Vladdy** · 11-25-2002 05:55 PM

if you use display = none the whole page will be jumping around as the iframe is being removed form the flow and put back in.
How much data are you talking about (fields?)
I would go with dynamic script instead of an iframe.

**Stefan** · 11-25-2002 09:04 PM

Originally posted by Vladdy
if you use display = none the whole page will be jumping around as the iframe is being removed form the flow and put back in.

But why would he want to put the iframe back in?

And if needed, he could still use CSS, just {visibility:hidden} instead.

**Doug_Dyer** · 11-26-2002 06:36 AM

I just put <IFRAME ..... height=0 width=0> and it works with no side effects.

I thought for sure Id at least see some artifact but IE does let you do it.

**Vladdy** · 11-26-2002 07:09 AM

If you are not using IFRAMEs to display the returned content, why use them at all

**Doug_Dyer** · 11-26-2002 07:32 AM

Originally posted by Vladdy
If you are not using IFRAMEs to display the returned content, why use them at all

To reload data from the server without annoying flicker. As I have been able to figure out, there is no way for javascript to reload select information from the server, so I put it in hidden IFRAMEs and reload them at periodic intervals (hidden because the reload would cause visual flicker).

Then my javascript does a diff on the values of the visible and hidden input pairs and updates the visible one on change. No flicker because the update occurs within javascript as an assignment and is not a clean reload of the frame.

Is there a better way? I've plowed over books recently and they seem to concur that js cannot communicate with the server. This is like my first JS project ever so Im very green to the client-side stuff. This is the best thing I could think of.

**Vladdy** · 11-26-2002 08:10 AM

books-shmooks

Something like this goes on your HTML page:

Code:


...
<script>
fields = new Array(0,0....0);
fieldIDs = newArray('Field1','Field2',....,'FieldN');

scriptNode = null;

function getUpdate()
{ scriptNode=document.createElement('script');
  scriptNode.type='text/javascript';
  script.src = 'http://www.yourweb.com/serverscript.asp';
  document.getElementsByTagName('head')[0].appendChild(scriptNode);
  return;
}

function updateFields()
{  for(i=0;i<fields.length; i++)
     { if(fields[i]!=newfields[i])
         document.getElementById(fieldIDs[i]).firstChild.nodeValue = newfields[i];
     }
  document.getElementsByTagName('head')[0].removeNode(scriptNode);
}
</script>
....
<p id="Field1">Field 1 Value goes here</p>
.....
<p id="Field2">Field 2 Value goes here</p>
....

Have your server script construct a js file that would have new values in newfields array and call updateFields() function at the end. The output should look like:

Code:


newfields = new Array(12,134,23,....123);
updateFields();

**Doug_Dyer** · 11-26-2002 09:00 AM

Hey thats pretty cool

And this solution isn't tied to IEs IFRAME. I tried it and on the second update I get a page error, it dies on the appendChild bit in getupdate.

Any ideas?

<HEAD>
<script language="JavaScript">
fields = new Array(0,0,0);
fieldIDs = new Array('Field1','Field2','Field3');

scriptNode = null;

function getUpdate()
{
scriptNode=document.createElement('script');

scriptNode.type='text/javascript';
scriptNode.src = 'newwaysource.htm';

document.getElementsByTagName('head')[0].appendChild(scriptNode);

return;
}

function updateFields()
{
for(i=0;i<fields.length; i++) {

if(fields[i] != newfields[i]) {
var element = document.getElementById(fieldIDs[i]);

if (element.type)
element.value = newfields[i];
else
element.firstChild.nodeValue = newfields[i];
}
}

document.getElementsByTagName('head')[0].removeNode(scriptNode);
}
</script>
</HEAD>

<FORM>
<p id="Field1">Field 1 Value goes here</p>
<p id="Field2">Field 2 Value goes here</p>
<INPUT TYPE="TEXT" id="Field3">

<INPUT TYPE="BUTTON" onclick="getUpdate();" value="UPDATE">
</FORM>

My "input" file:

newfields = new Array(122,134, 'dork');
updateFields();

**Doug_Dyer** · 11-26-2002 09:50 AM

I got it.... the updateFields routine removes the childnode off of 'head' but it should be 'script'. This makes it work every time, but its confusing:

Why is the following code working? Do you think there isn't some weirdness when I delete the child off of the script element that was created?

creation
scriptNode=document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(scriptNode);

deletion
document.getElementsByTagName('script')[0].removeNode(scriptNode);

**Vladdy** · 11-26-2002 10:20 AM

Sorry, my screw up - it was too early in the morning to think straight:
My idea was to delete the script node after it was executed (otherwise you will keep accumulating script nodes in your <head>

).
However I put the deletion part in not a very good point and used the wrong function

Here is the improved (and tested this time) script

Code:


<html>
<head>
<title>Test Dynamic Update</title>
<script type='text/javascript'>
fields = new Array(0,0,0);
fieldIDs = new Array('Field1','Field2','Field3');

scriptNode = null;

updateNumber = 0;

function getUpdate()
{ dhead = document.getElementsByTagName('head')[0];
  if(scriptNode) dhead.removeChild(scriptNode);
  scriptNode=document.createElement('script');
  scriptNode.type='text/javascript';
  scriptNode.src = 'newwaysource.htm';
  dhead.appendChild(scriptNode);
  return;
}

function updateFields()
{ for(i=0;i<fields.length; i++)
   { if(fields[i] != newfields[i])
      { var element = document.getElementById(fieldIDs[i]);
        if (element.type) element.value = newfields[i];
        else element.firstChild.nodeValue = newfields[i];
      }
   }
  updateNumber++;
  document.getElementById('un').firstChild.nodeValue = updateNumber;
}
</script>
</HEAD>
<body>
<FORM>
<p>Number of updates: <span id="un">0</span> </p>
<p id="Field1">Field 1 Value goes here</p>
<p id="Field2">Field 2 Value goes here</p>
<INPUT TYPE="TEXT" id="Field3">

<INPUT TYPE="BUTTON" onclick="getUpdate();" value="UPDATE">
</FORM>
</body>
</html>

I put the number of updates ticker just for the testing purposes. When you have it debuged and ready to put on a timer, use
<body onload="setInterval('getUpdate()',5000)">

**Doug_Dyer** · 11-26-2002 10:42 AM

Many thanks!

That makes more sense, and you used <span>, which was a new one to me. Very cool.

**Sangit** · 09-13-2005 07:54 PM

the solution works fine in firefox etc.
unfortunately it does not in safari, it only shows the values for the first update, then the values dont change any more
does anyone know why?

Thread: Is there a way to do hidden IFRAMEs?

Thread Tools

Display

Is there a way to do hidden IFRAMEs?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions