Is there a way to do hidden IFRAMEs?

liunx · Jan 9, 2008

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, 
DougTry <iframe style="display:none;">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.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.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.If you are not using IFRAMEs to display the returned content, why use them at all

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.books-shmooks

Something like this goes on your HTML page: 
 
... 
<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!=newfields) 
document.getElementById(fieldIDs).firstChild.nodeValue = newfields; 
} 
document.getElementsByTagName('head')[0].removeNode(scriptNode); 
} 
</script> 
.... 
Field 1 Value goes here 
..... 
Field 2 Value goes here 
.... 
 
 
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: 
 
newfields = new Array(12,134,23,....123); 
updateFields();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 = 'http://www.webdeveloper.com/forum/archive/index.php/newwaysource.htm'; 
 
document.getElementsByTagName('head')[0].appendChild(scriptNode); 
 
return; 
} 
 
function updateFields() 
{ 
for(i=0;i<fields.length; i++) { 
 
if(fields != newfields) { 
var element = document.getElementById(fieldIDs); 
 
if (element.type) 
element.value = newfields; 
else 
element.firstChild.nodeValue = newfields; 
} 
} 
 
document.getElementsByTagName('head')[0].removeNode(scriptNode); 
} 
</script> 
</HEAD> 
 
<FORM> 
Field 1 Value goes here 
Field 2 Value goes here 
<INPUT TYPE="TEXT" id="Field3"> 
 
<INPUT TYPE="BUTTON" onclick="getUpdate();" value="UPDATE"> 
</FORM> 
 
 
 
 
 
My "input" file: 
 
 
newfields = new Array(122,134, 'dork'); 
updateFields();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);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 
 
 
<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 = 'http://www.webdeveloper.com/forum/archive/index.php/newwaysource.htm'; 
dhead.appendChild(scriptNode); 
return; 
} 
 
function updateFields() 
{ for(i=0;i<fields.length; i++) 
{ if(fields != newfields) 
{ var element = document.getElementById(fieldIDs); 
if (element.type) element.value = newfields; 
else element.firstChild.nodeValue = newfields; 
} 
} 
updateNumber++; 
document.getElementById('un').firstChild.nodeValue = updateNumber; 
} 
</script> 
</HEAD> 
<body> 
<FORM> 
Number of updates: 0 
Field 1 Value goes here 
Field 2 Value goes here 
<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)">Many thanks! 
 
That makes more sense, and you used , which was a new one to me. Very cool.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?

Is there a way to do hidden IFRAMEs?

liunx

Guest