Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to : Auto Reload ?

Posted on 1999-07-11
30
Medium Priority
?
605 Views
Last Modified: 2008-02-26

Hi there, my question may look simple.... i don't know ... you judge!

How can i set a page to reload itself automaticly AFTER THE WHOLE PAGE IS DOWNLOADED ?

In other words... i want a method that will force the page to reload itself in the visitor's browser as soon as all its objects (images, text, apllet, class....etc)  become ALL visibale in the browser?

This is important because ... i am intendeing to refresh (or change) the components with each time the page reload...

I have a code that reload the page after a specific number of seconds..... but i don't know how long ,EXACTLY, would it take to download the whole page!   It defferes from one browser to another .... and from one connection to another!


I need a method to do this automatically... (applet, html code, jave script ,  any new use of an old idea , any suggestions MUST envolve the auto reload idea..... etc)


Thanks ....



0
Comment
Question by:innovator
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 9
  • 4
  • +4
30 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 1851813
I'm not sure that this is what you really want to do, because then the page would constantly be reloading, but ...

<BODY onLoad='self.history.go(0)'>

 or

<BODY onLoad='location=.location.href+location.search'>

I doubt you will want to do this exactly, but perhaps a variation on this theme will be helpful.

0
 
LVL 4

Expert Comment

by:siabod
ID: 1851814
maybe somethiing to add on kEk suggestion, create another copy of the page without the onload command and refresh from the first page to the new one, that avoids an endless loop.
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851815
how about <body onload=self.reload(true)>.  I think that forces a reload from the server (instead of cache), but probably only once.  You could also do a setTimeout in the onload event, e.g. <body onload="setTimeout("self.reload(true), 10000>, which will fire 10 seconds after the page finishes reloading.

You might also use a <meta> tag, but I think that will fire even if the page has not reloaded.

Tom
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:mouatts
ID: 1851816
Add the following code to every image or loadable component in the document.

onLoad="loaded()"

then add the following to the top of the document

<SCRIPT LANGUAGE="Javascript">
load_counter=0
num_images=5
reload_time=3000
reload()
{

function loaded()
{
    ++load_counter;
    if(load_counter=num_images)
    {
         setTimeout('self.reload(true)',reload_time)
    }
}
</SCRIPT>

Adjust reload_time and num_images as required.
Please note that I've not tested this.
0
 

Author Comment

by:innovator
ID: 1851817

Thanks to all of you.....

But i need a method to reload the page for 4 times untill it stops on the fourth reloaded page.....
Of course , page 1,2 & 3  should NOT start reloading BEFORE the FULL loaded page. (i.e. the pages should be fully downloaded before start to reload)


Thanks again.... waiting for your suggestions!  
0
 

Expert Comment

by:kamyanlai
ID: 1851818
Put this scrip at the end of your web page.

Just above the end of </body> tag (See example below)

Your url will need an extra field on the end.
I've used reload=0

so the url will be for example :-

http://yourwebpage.htm?reload=0

This will load all the stuff on your page first and the run the script last.

<html>
<body>

Your html information here !


<script>
var querystring = window.location.search;
var numreload = querystring.split("=");
var counter;

if(numreload[1] != 4){
counter = eval(numreload[1]) + 1;
window.location.href = "yourwebpage.htm?reload=" + counter;
}
</script>
</body>
</html>

I hope this helps
0
 
LVL 11

Expert Comment

by:mouatts
ID: 1851819
The simplest solution would be to use my suggestion, which does allow the entire page to be downloaded before the reload commences unlike kamyanlai which does wait for the images etc. But rather than do a reload have four copies of the page and change the

setTimeout('self.reload(true)',reload_time)

to

setTimeout('document.location="page2.html"',reload_time)

changing the page number on each one.

If you have SSI available to you then you can prevent the actual page duplication by declaring a variable called page_name at the top of the script and include the whole page.

Then after the inclusion set the value of page_name to be the appropriate page (having changed document.location="page2.html" to document.location=page_name

ie The first page would look like this
<!--#include file="myfile.html"-->
<SCRIPT LANGUAGE="Javascript">
page_name="page2.html"
</SCRIPT>

and the second page like this
<!--#include file="myfile.html"-->
<SCRIPT LANGUAGE="Javascript">
page_name="page3.html"
</SCRIPT>

HTH
Steve
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851820
How about combining all of this together and using kamayanlai's script in the onload handler, e.g

<body onload="reloadifnec()">

<script>
function reloadifnec() {
var querystring = window.location.search;
var numreload = querystring.split("=");
var counter;

if(numreload[1] != 4){
counter = eval(numreload[1]) + 1;
window.location.href = "yourwebpage.htm?reload=" + counter;
}
}
</script>

Don't know if that would work, but...

Tom

0
 

Author Comment

by:innovator
ID: 1851821


Hi there...

Thanks againf for all of  the suggestions you gave me!

Maybe i did not describe what i need probably... because English is my
third foriegn language)  :)


What i want simply is :

A code that i will insert into "page1.html" , this code will wait untill
the full download of all the components in "page1.html"

then.... immediatly after this, the browser will reload itself but to go to
"page2.html" and also wait until finishing downloading it completaly... then reload to
page3.html.... etc

then reload to "page4.html" and stop there!

As these pages contains some components which are difrent or similar to the other
components in the other pages..... because of this , i want the code to reload the
page from the server  NOT the user's cashe!

******
When i inserted kamyanlai's code... the page generated an script errors
"Object doesn't support this property or method"   i don't know if i did anything wrong!
what is meant by reload=0 ,
in window.location.href = "yourwebpage.htm?reload=" + counter;  should i write
the page's name or the page location ?

******
to mouatts
I don't know the reload time.... so i can't adugst the time as i want... simply because
i don't know how long exactly should it take to load .

*****
i will try TTom's suggestion later.

Thanks to all of you.
0
 

Author Comment

by:innovator
ID: 1851822
Adjusted points to 215
0
 

Expert Comment

by:kamyanlai
ID: 1851823
From you description, it seems that you're not reloading the same page but a new page each time.

If this is the case you will need to put a script within each page to tell the browser to load the next page.

So

page1.html ---> page2.html
page2.html ---> page3.html
page3.html ---> page4.html

in page1.html

<script>
window.location.href="page2.html";
</script>


in page2.html

<script>
window.location.href="page3.html";
</script>

and so on.....

(Note put script at the end of the web page. Just above the </body> tag.)

Unless you use frames to control the windows, but get abit messy if you're a beginner.
There are other ways but just gets messy with all the jumping around.

The above code is simple, and is low maintance.
Also it depends on what you're loading, and what scripting languages (could simplify if your using ASP)
0
 
LVL 11

Expert Comment

by:mouatts
ID: 1851824
The reload time in my time was simply the final delay after the page and all its components have loaded. Because the onLoad on each component is being monitored it won;t fire until everything is there which is what you wanted ie

<HTML>
<SCRIPT LANGUAGE="Javascript">
load_counter=0;
num_images=5 ;
reload_time=3000 ;
page_name="";
reload()
{

function loaded()
{
    ++load_counter;
    if(load_counter=num_images)
    {
         setTimeout('document.location=page_name',reload_time) ;
 
    }
}
</SCRIPT>
<BODY>
<IMG SRC="mygif1.gif" onLoad="loaded()">
<IMG SRC="mygif2.gif" onLoad="loaded()">
<IMG SRC="mygif3.gif" onLoad="loaded()">
<IMG SRC="mygif4.gif" onLoad="loaded()">
<IMG SRC="mygif5.gif" onLoad="loaded()">
</BODY>
<SCRIPT LANGUAGE="Javascript">
page_name="page2.html"
</SCRIPT>

</HTML>


0
 

Expert Comment

by:basman
ID: 1851825
Put this in the header of your pages.
__________________________________________________________________

<html>
<head>
<meta http-equiv="refresh" content="5;url=http://www.innovator.com/page2.html">
<meta NAME="keywords" CONTENT="Automatic redirect or something">
<meta NAME="description" CONTENT="Redirect to page 2">
<meta NAME="ROBOTS" CONTENT="ALL">
<title>Page 1</title>
</head>
<body>

</body>
</html>
__________________________________________________________________

options:  
content="5;url=http://www.innovator.com/page2.html">
5 = duration page is diplayed
url="page.htm" = new page to load

Greetings,
Basman
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851826
innovator:

Seems to me (apologies to my fellow experts for repetition/'poaching') that what you need is:

page1.htm:
<body onload="window.location = 'page2.htm'">

page2.htm:
<body onload="window.location = 'page3.htm'">

page3.htm:
<body onload="window.location = 'page4.htm'">

That will load each of the pages successively after the page has completed loading.

Tom
0
 
LVL 11

Expert Comment

by:mouatts
ID: 1851827
Tom and the others:
Body onLoad will force the reload after the page of HTML has loaded but the images etc may not have!
This is why I suggested putting the onLoad on the actual objects rather than just the body.

Innovator: Have you tried my suggestion yet?

Steve
0
 
LVL 9

Expert Comment

by:TTom
ID: 1851828
Steve:

Thanks for clarifying.  Didn't know that.

Tom
0
 

Author Comment

by:innovator
ID: 1851829
Hi ... what "mouatts" said in : Friday, July 16 1999
was true!

There is one problem .... every time i try mouatts suggestions... several errors windows poped up!

I don't know if i made a mistake or what... but this is what is happining...

Ok, to simplfy the issue.... lets say that i have only one object in each page which is  "photo.gif"
and my home page is www.mydomainxyz.com , pages are page1.html page2.html page3.html  & page4.html

so what should i write in each page's html code.....

Please mouatts try to review your code to know if i am making any mistake!

Thanks.

 
0
 

Author Comment

by:innovator
ID: 1851830
Adjusted points to 240
0
 
LVL 11

Expert Comment

by:mouatts
ID: 1851831
Just looking back at it there are loads of missing semi-colons for starters (thats doing too much ASP that does that).

I've been through this loop before and I would suggest that you post you code and I will check it over. That way we can make sure that we are both singing from same song sheet.

Steve
0
 

Author Comment

by:innovator
ID: 1851832
mouatts,

Well, the problem is that i know too little about java script..... so i hope that you will give me a "clear" example to reload the page into a second page after the first page's components are all loaded.

i think that i got cunfused because you gave me several answers and options! :)

in one of your answers you asked me to change

setTimeout('self.reload(true)',reload_time)

to setTimeout('document.location="page2.html"',reload_time)

i did not understand if i should write "reload_time" or should i write 3000 ?   document location.... is it the http..... or just a  "document.location"

I am sorry that i took all that time... but as i said above  i know too litle about java, and my english (reading/understanding)  is my second problem! :)

Thanks.
0
 

Author Comment

by:innovator
ID: 1851833
mouatts,

Well, the problem is that i know too little about java script..... so i hope that you will give me a "clear" example to reload the page into a second page after the first page's components are all loaded.

i think that i got cunfused because you gave me several answers and options! :)

in one of your answers you asked me to change

setTimeout('self.reload(true)',reload_time)

to setTimeout('document.location="page2.html"',reload_time)

i did not understand if i should write "reload_time" or should i write 3000 ?   document location.... is it the http..... or just a  "document.location"

I am sorry that i took all that time... but as i said above  i know too litle about java, and my english (reading/understanding)  is my second problem! :)

Thanks.
0
 
LVL 11

Expert Comment

by:mouatts
ID: 1851834
Happy to but I'm afraid you will have to wait a couple of days as I'm going away.

Steve
0
 

Author Comment

by:innovator
ID: 1851835
Ok.. Steve .... I will wait !  :)
0
 
LVL 11

Expert Comment

by:mouatts
ID: 1851836
The code below is what you are looking for. (some of the names are different from whats above as I couldn't remember what I had used but the principles are the same.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
var new_page;
var wait_time=5000;
var image_count=0;
var image_limit=2;
function next_page()
{
      document.location=new_page;
}
function loaded()
{
      image_count++;
      if(image_count==image_limit)
      {
            setTimeout("next_page()",wait_time);
      }
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="moon.gif" onLoad="loaded();">
<IMG SRC="tree.gif" onLoad="loaded();">
</BODY>
<SCRIPT LANGUAGE="javascript">
new_page="test2.html"
</SCRIPT>
</HTML>


The variables that you need to manipulate are as follows

wait_time is the time (in 1000th of a second) to wait after the last image has loaded.
image_limit is the number of images on the page that we are waiting to load.
new_page is the next page to be loaded.

It is this final variable (in the second SCRIPT block) that needs to be changed to cycle through each (you may wish to also change the image_limit as well if subsequent pages have a different number of images in the same way.

So with each ASP page you would simply need to change these two variables for the whole shooting match to cycle through your set of pages.

HTH
Steve
0
 

Author Comment

by:innovator
ID: 1851837
Steve... Thanks alot for your comment dated July 28 1999

I tried out the code and changed the variancies as mentioned and it worked just great!

I just have the following uncleared pointsand hope to get your comments :

1) What if the page contains text.... shall the browser wait for the text
too?

2) I tried the code on an html page... what is ASP page you mentioned?

3) Well, i knoow that i did not say this before... cuz i thought it is not
important ..... but what if my page contains a link to a banner exchange site!

so it should wait for the banner to show up.... the banner ,however, is
not a normal imaje link... i.e. it is not : <IMG SRC="tree.gif">

the link that i should put in the page looks like :

<!-- BEGIN BANNERXCHANGE CODE -->
<center><iframe src="http://leader.bannerxchange.com/1/X1112366/showiframe?" width=468 height=60 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no>
<a href="http://leader.bannerxchange.com/1/X1112366/clickle" target="_top"><img width=468 height=60 border=0 ismap alt="" src="http://leader.bannerxchange.com/1/X1112366/showle?"></a></iframe><br><a href="http://leader.bannerxchange.com/1/X1112366/clicklogo" target="_top"><img src="http://leader.bannerxchange.com/1/X1112366/showlogo?" width=468 height=16 border=0 ismap alt=""></a><br></center>
<!-- END BANNERXCHANGE CODE -->


so, how can i set the code to wait for the banner also?


If this may help you.... i have one banner only... i.e. the other refered pages does not contain the banner exchange link!  (i don't know if this is useful or not?)


Please submit your comment as an answer.... unless you don't want to take the credit points !  :)

Thanks again... waiting for your comment.
0
 

Author Comment

by:innovator
ID: 1851838
Adjusted points to 250
0
 
LVL 11

Accepted Solution

by:
mouatts earned 1000 total points
ID: 1851839
1) Because the javascript is in the same document then this shouldn't be a problem

2) ASP is a method for generating pages (like CGI) that can be used when you have the IIS Webserver. If you don't have this then don't worry.

3) It should work if you put the onLoad bit on the Iframe and the IMG tag. I must admit I've not tried this. However a word of warning here. If the bannerexchange server is down or very slow it will hold up your page. A solution to that would be to add onError="loaded()" as well for the iframe this way if the server is down it will clock on and allow your pages to be displayed.

HTH
Steve
0
 

Author Comment

by:innovator
ID: 1851840

Hi mouatts ..... i know that this question took more than it should take! :)

final point:  You said that itMAY work if i put "onLoad bit on the Iframe and the IMG tag .......and if the server is slow i may use onError="loaded()"

could you please, place what you suggested above in the code below?  just copy and paste it after putting the variances you think would be useful!

Should i count the banner as one image, so i must modify the image counter?
 
Your answer is accepted..... just add this last comment, and i will try it myself!

Thanks alot for your answer!

Here is the banner exchange code  :



<!-- BEGIN BANNERXCHANGE CODE -->
<center><iframe src="http://leader.bannerxchange.com/1/X1112366/showiframe?" width=468 height=60 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no>
<a href="http://leader.bannerxchange.com/1/X1112366/clickle" target="_top"><img width=468 height=60 border=0 ismap alt="" src="http://leader.bannerxchange.com/1/X1112366/showle?"></a></iframe><br><a href="http://leader.bannerxchange.com/1/X1112366/clicklogo" target="_top"><img src="http://leader.bannerxchange.com/1/X1112366/showlogo?" width=468 height=16 border=0 ismap alt=""></a><br></center>
<!-- END BANNERXCHANGE CODE -->

0
 
LVL 11

Expert Comment

by:mouatts
ID: 1851841
<!-- BEGIN BANNERXCHANGE CODE -->
<center><iframe src="http://leader.bannerxchange.com/1/X1112366/showiframe?" width=468 height=60 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no onLoad="loaded();" onError="loaded();">
<a href="http://leader.bannerxchange.com/1/X1112366/clickle" target="_top"><img width=468 height=60 border=0 ismap alt="" src="http://leader.bannerxchange.com/1/X1112366/showle?" onLoad="loaded();"></a></iframe><br><a href="http://leader.bannerxchange.com/1/X1112366/clicklogo" target="_top"><img src="http://leader.bannerxchange.com/1/X1112366/showlogo?" width=468 height=16 border=0 ismap alt="" onLoad="loaded();"></a><br></center>
<!-- END BANNERXCHANGE CODE -->

You need to add 2 to image_limit (one for the iframe or the image if iframe is not supported and one for the second image)
0
 

Author Comment

by:innovator
ID: 1851842
thanks!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

661 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question