www.webdeveloper.com
Results 1 to 13 of 13

Thread: Is there a way to do hidden IFRAMEs?

  1. #1
    Join Date
    Nov 2002
    Posts
    36

    Is there a way to do hidden IFRAMEs?

    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

  2. #2
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    Try <iframe style="display:none;">

  3. #3
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    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.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  4. #4
    Join Date
    Nov 2002
    Posts
    984
    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.
    // Stefan Huszics

  5. #5
    Join Date
    Nov 2002
    Posts
    36
    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.

  6. #6
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    If you are not using IFRAMEs to display the returned content, why use them at all
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  7. #7
    Join Date
    Nov 2002
    Posts
    36
    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.

  8. #8
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    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();
    
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  9. #9
    Join Date
    Nov 2002
    Posts
    36
    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();

  10. #10
    Join Date
    Nov 2002
    Posts
    36
    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);

  11. #11
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    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)">
    Last edited by Vladdy; 11-26-2002 at 10:22 AM.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  12. #12
    Join Date
    Nov 2002
    Posts
    36
    Many thanks!

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

  13. #13
    Join Date
    Sep 2005
    Posts
    1
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles