www.webdeveloper.com
Results 1 to 3 of 3

Thread: Putting a variable http address into an iframe with auto refresh

  1. #1
    Join Date
    Oct 2008
    Posts
    8

    Putting a variable http address into an iframe with auto refresh

    Hi
    I am trying to put a http address into an Iframe. The Iframe will need to be refreshed every 5 minutes (this is currently working).

    My problem is that I cannot get the http address into the Iframe to work, itís just blank.

    The data displayed in the Iframe is real time thus the refresh every 5 minutes.
    Unfortunately I cannot test this due to security unless I am at work so have used a set of images with different dates as file names but the process should be the same(I hope).

    Any help would be much appreciated.

    Regards

    Stubyh

    my code so far

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    
    <!-- just display the date so I know the date script is working ok -->
    <form name="dform">
    <input type="text" name="currentdate" size=11> </form> 
    
    <script>
    
    /*Current date in form dform: 
    */
    
    var mydate=new Date()
    var theyear=mydate.getYear()
    if (theyear < 1000)
    theyear+=1900
    var theday=mydate.getDay()
    var themonth=mydate.getMonth()+1
    if (themonth<10)
    themonth="0"+themonth
    var theday=mydate.getDate()
    if (theday<10)
    theday="0"+theday
    
    //////EDIT below three variable to customize the format of the date/////
    
    var displayfirst=themonth
    var displaysecond=theday
    var displaythird=theyear
    
    
    
    // local testing
    var urlTxt="http://localhost/adalex/"
    var urlTxt1=displayfirst
    var urlTxt2="_"
    var urlTxt3=displaysecond
    var urlTxt4="_"
    var urlTxt5=displaythird
    var urlTxt6=".jpg"
    
    // put the date into dfrom
    document.dform.currentdate.value=displayfirst+"_"+displaysecond+"_"+displaythird
    
    // merge all the variables above into one string
    var urlTxt7=urlTxt+urlTxt1+urlTxt2+urlTxt3+urlTxt4+urlTxt5+urlTxt6
    
    // display that string onto the page so I know I have the right string
    document.write(urlTxt7)
    
    //put the string into myframe --- not sure if this is working -- removed for now
    //document.getElementById("myframe").src = urlTxt7
    
    </script>
    
    
    <script type="text/javascript">
    function init() {
    //put the string into myframe --- not sure if this is working
      var url =  urlTxt7;
      document.getElementById("myframe").src = url;            
          }
    </script>
    
    
    
    <script>
    
    /*
    Auto Refresh Page with Time script
    */
    
    //enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59 
    
    var limit="5:00"
    if (document.images){
    var parselimit=limit.split(":")
    parselimit=parselimit[0]*60+parselimit[1]*1
    }
    function beginrefresh(){
    if (!document.images)
    return
    if (parselimit==1)
    window.location.reload()
    else{
    parselimit-=1
    curmin=Math.floor(parselimit/60)
    cursec=parselimit%60
    if (curmin!=0)
    curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!"
    else
    curtime=cursec+" seconds left until page refresh!"
    window.status=curtime
    setTimeout("beginrefresh()",1000)
    }
    }
    window.onload=beginrefresh
    
    </script>
    
    </head>
    
    <!-- display the iframe on the page, desplay a picture depending on what the date is
    auto refresh of the page allows for the image to change when it has gone passed midnight -->
    <body  onLoad="init()">
    
    
    <iframe id="myframe" frameborder="1" height="100%" width="100%" src=""></iframe>
    
    
    <p>
    Some older browsers don't support iframes. If they don't, the iframe will not be visible.
    </p>
    
    
    </body>
    </html>

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    is this code close to what you are trying? has done some change, hope you understand what it do:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    
    <!-- just display the date so I know the date script is working ok -->
    <form name="dform">
    <input type="text" name="currentdate" size=11> </form> 
    
    <script>
    var mydate=new Date()
    var ymd = []; // year, month, date;
    ymd.push(mydate.getFullYear());
    ymd.push((mydate.getMonth() + 1 < 10)? '0'+ (mydate.getMonth()+1): mydate.getMonth()+1);
    ymd.push((mydate.getDate() < 10)? '0'+mydate.getDate(): mydate.getDate());
    
    /////EDIT below three variable to customize the format of the date/////
    var urlTxt7 = "http://localhost/adalex/" + ymd.join("_") + ".jpg";
    document.dform.currentdate.value= ymd.join("_");
    document.write(urlTxt7);
    
    function init() {
    document.getElementById("myframe").src = urlTxt7;
    }
    
    //enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59 
    var limit="5:00";
    var parselimit=limit.split(":");
    parselimit=parselimit[0]*60+parselimit[1]*1;
    
    function beginrefresh(){
    	if (!parselimit){
    	init();
    	parselimit=limit.split(":");
    	parselimit=parselimit[0]*60+parselimit[1]*1;
    	setTimeout("beginrefresh()",1000);
    	}else{
    	parselimit-=1;
    	curmin=Math.floor(parselimit/60);
    	cursec=parselimit%60;
    	if (curmin!=0)curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!";
    	else curtime=cursec+" seconds left until page refresh!";
    	window.status=curtime;
    	setTimeout("beginrefresh()",1000);
    	}
    }
    
    window.onload= function(){
    beginrefresh();
    init();
    }
    </script>
    
    </head>
    
    <!-- display the iframe on the page, desplay a picture depending on what the date is
    auto refresh of the page allows for the image to change when it has gone passed midnight -->
    <body>
    
    
    <iframe id="myframe" frameborder="1" height="100%" width="100%" src=""></iframe>
    
    
    <p>
    Some older browsers don't support iframes. If they don't, the iframe will not be visible.
    </p>
    
    
    </body>
    </html>
    Last edited by ZeroKilled; 10-26-2008 at 06:56 PM.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Oct 2008
    Posts
    8

    resolved

    many thanks ZeroKilled, code put the picture in the frame which has saved me many hours of staring at the computer, but it did not for some reason auto refresh after the 5 min.
    But I have managed to resolve this.

    here is my final code. again many thanks

    Regards

    Stubyh

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    
    <!-- just display the date so I know the date script is working ok -->
    <form name="dform">
    <input type="text" name="currentdate" size=11> </form> 
    
    <script>
    var mydate=new Date()
    var ymd = []; // year, month, date;
    // modified to show as USA date format month/day/year; 
    ymd.push((mydate.getMonth() + 1 < 10)? '0'+ (mydate.getMonth()+1): mydate.getMonth()+1); //month;
    ymd.push((mydate.getDate() < 10)? '0'+mydate.getDate(): mydate.getDate());  // day
    ymd.push(mydate.getFullYear()); // year;
    
    
    /////EDIT below three variable to customize the format of the date/////
    var urlTxt7 = "http://localhost/adalex/" + ymd.join("_") + ".jpg";
    document.dform.currentdate.value= ymd.join("_");
    document.write(urlTxt7);
    
    function init() {
    document.getElementById("myframe").src = urlTxt7;
    }
    
    //enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59 
    var limit="5:00"
    if (document.images){
    var parselimit=limit.split(":")
    parselimit=parselimit[0]*60+parselimit[1]*1
    }
    function beginrefresh(){
        if (!document.images)
           return
        if (parselimit==1)
           window.location.reload()
        else{
           parselimit-=1
           curmin=Math.floor(parselimit/60)
           cursec=parselimit%60
         if (curmin!=0)
             curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!"
         else
             curtime=cursec+" seconds left until page refresh!"
             window.status=curtime
             setTimeout("beginrefresh()",1000)
             }
         }
    
    
    window.onload= function(){
    beginrefresh();
    init();
    }
    </script>
    
    </head>
    
    <!-- display the iframe on the page, desplay a picture depending on what the date is
    auto refresh of the page allows for the image to change when it has gone passed midnight -->
    <body>
    
    
    <iframe id="myframe" frameborder="1" height="100%" width="100%" src=""></iframe>
    
    
    <p>
    Some older browsers don't support iframes. If they don't, the iframe will not be visible.
    </p>
    
    
    </body>
    </html>

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