PDA

View Full Version : Reload external page in frame, no-cache?



KE5EHI
12-25-2005, 11:13 AM
I'm working on a site that is going to be loading external pages into a frame. These are going to be both text and graphics that update as quick as 5 minutes. My question is how do I get the frame to refresh itself and whatever content is currently displayed?

I'm not good on javascript, but I was playing with a script I found that is pretty much this (in the frameset index.htm page):


setTimeout('refresh()', 300000);

function refresh() {
window.frames['main'].location.replace();
setTimeout('refresh()', 300000);

This code reloads the index.htm into the 'main' window, so I get two menus (top and side). How do I make it only refresh the content in the 'main' window? Also, is there a way to add something in there to not cache the image/text?

Thanks!

jscheuer1
12-25-2005, 08:05 PM
Put the location url for the content:


setTimeout('refresh()', 300000);

function refresh() {
window.frames['main'].location.replace('here');
setTimeout('refresh()', 300000);

Example:


window.frames['main'].location.replace('somepage.htm');

Be sure to include the single quotes (') around the page name.

KE5EHI
12-27-2005, 01:42 AM
Right, but is there a way to make it load whatever is in that window? It's going to have numerous (probably around 20ish) pages and I'm trying to get a script on the index.htm frameset page that will refresh that frame not matter what is in it. Can I point the refresh to the name of the frame instead of a URL?

Thanks!

KE5EHI
12-27-2005, 01:46 AM
...or somehow make it read the url that is loaded in that frame. The images and text are going to be coming from an external source, and they range from .gif to .txt and the 'main' frame itself doesn't always load a .html file, sometimes it just loads a .gif or .txt. Hope that makes sense.

jscheuer1
12-27-2005, 04:58 AM
You can give this a shot, worked here in local testing:


function refresh() {
window.frames['main'].window.location.replace(window.frames['main'].window.location);
setTimeout('refresh()', 300000);
}

setTimeout('refresh()', 300000);

It would be better if we knew the URL in question, how are these determined? Is it the result of the user clicking on a link? If so, we code grab the URL of the href of each link at the time it is clicked and store it in a variable to be used:


window.frames['main'].window.location.replace(here);

KE5EHI
12-27-2005, 09:16 AM
Thanks! I'm gonna give that a try in a few minutes. I haven't put the site up yet (just starting it), but if that doesn't work, I'll post it.

In short, there's 3 frames: top, side, main

Top links to side, side links to main

Side is composed of links to pages or images (ie. http://www.whatever.com/page.htm or http://www.whatever.com/image.gif), that load into the main frame and those pages/images are on an external server (not tied in with me). Those images are updated in 5-10min intervals and I'm trying to get my site to refresh them (by refreshing the frame itself, since I'm going to have a lot of links to manage).

I'll let you know here in a bit if that code works.

KE5EHI
12-27-2005, 10:15 AM
Okay, doesn't seem it worked. I uploaded the site:
http://www.towpc.com/ke5ehi/wx/

I've put a graphic for the 'main' window that updates every 10 minutes, and I've changed the refresh timer to 25 seconds (for testing). Give it a looksy and see what might be wrong when you got a minute. My goal, again, is for anything loaded in the 'main' window to be refreshed every 5 minutes. If I can tack on a script on each link for another script to refresh it, that would work too (as long as it doesn't try to refresh the last page with the script and when a page is loaded that doesn't need to be refreshed, it refreshes it back to the last refreshable item).

I'm getting tired of typing 'refresh', heh

KE5EHI
12-27-2005, 10:45 AM
Wait a sec... it worked when I reloaded the page and the main.htm was in the main window, but it doesn't work when a graphic or page (ie SPC Main Page) is loaded.

jscheuer1
12-27-2005, 06:11 PM
That has to do with the security of a frame's content across domains. You didn't mention before (as far as I remember) that this would be off site content. My idea of keeping track of the URL works here though. The way to do that would be something like so:


<!-- Refresh 'main' window, 5min -->
<script type="text/javascript">
//Set theURL to the initial page for 'main'
var resetVar, theURL="http://www.srh.noaa.gov/radar/images/DS.p19r0/SI.kinx/latest.gif";
function refresh() {
window.frames['main'].window.location.replace(theURL);
resetVar=setTimeout('refresh()', 60*1000*5);
}
function reset(url){
if (typeof url!=='undefined')
theURL=url
clearTimeout(resetVar)
resetVar=setTimeout('refresh()', 60*1000*5);
}
reset();
</script>

Then on links to that frame that you wish to be updated use this type of syntax:


<a href="info.htm" onclick="parent.window.reset(this.href);return true;" target="main">Page Info</a>

On links that you would like to revert to the previous content after 5 minutes, use this syntax:


<a href="info.htm" onclick="parent.window.reset();return true;" target="main">Page Info</a>

KE5EHI
12-27-2005, 11:49 PM
Thanks John, you rock! That's working except one issue. I've uploaded the site again (most of the links at the top don't work yet) so you can see.

I've set the timer to 20 seconds for testing.

When the site loads, the main page will refresh after 20 seconds. If you click on SPC Products from the menu, then click anything else in the SPC menu, it will reload the 'main.htm' after 20 seconds. I put the link code on the link under "Watch, Warning, Adv." named SPC: "Watches." When you click that link, it will load the watches image (http://www.spc.noaa.gov/products/watch/validww.png) and will reload that image every 20 seconds. But if you click say SPC: "WWA", after 20 seconds it will reload the 'Watches' graphic.

How do I keep it so when a link is clicked that doesn't have the refresh onclick code, it won't reload the last image that was set to refresh?

I hope this is making some sense. Most of the images that are loaded (ie http://www.spc.noaa.gov/products/watch/validww.png) need to be refreshed in 5 min intervals, but some of the pages (ie http://www.spc.noaa.gov) that are loaded into the main frame have their own refresh code on the page, so I don't have to make them refresh myself.

Thanks again for the help, I'll make sure to mention ya in the credits.

jscheuer1
12-28-2005, 04:31 AM
Well, that was how I thought you said you wanted it to behave:


when a page is loaded that doesn't need to be refreshed, it refreshes it back to the last refreshable item

I probably misunderstood or took that out of context though. In any case, once you set this script in motion, in order for it to work for you, you need to have all links that target main to have some onclick code associated with them to tell the refresh function what it should be doing or not doing. And now as it seems that you want the option of some links behaving just as normal links, we will need to modify the script a little to allow for that. All links that target main will still need some onclick code. We can modify the reset(url) function like so:


function reset(url){
clearTimeout(resetVar)
if (typeof url!=='undefined'&&url!=='hold')
theURL=url
else if (typeof url!=='undefined'&&url=='hold')
return;
resetVar=setTimeout('refresh()', 60*1000*5);
}

Now, in addition to the two types of links we had before:

Then on links to that frame that you wish to be updated use this type of syntax:


<a href="info.htm" onclick="parent.window.reset(this.href);return true;" target="main">Page Info</a>


On links that you would like to revert to the previous updating content after 5 minutes, use this syntax:


<a href="info.htm" onclick="parent.window.reset();return true;" target="main">Page Info</a>

You can now use a third type of syntax that will only load the page in question (no refresh timer set):


<a href="info.htm" onclick="parent.window.reset('hold');return true;" target="main">Page Info</a>

and a fourth type that will load the page in question and set a timeout to refresh to a different page after 5 minutes:


<a href="info.htm" onclick="parent.window.reset('http://www.somedomain.com/somepage.htm');return true;" target="main">Page Info</a>

I feel I must stress that all links that target main must have one of these four onclick events associated with them, otherwise the result of clicking on a link that targets main without one of these onclick events associated with it will be unpredictable. This includes links on pages inside the main frame that have no target or that target main. The one exception being that if a page is loaded into main using the 'hold' syntax, links on that page will behave normally.

KE5EHI
12-28-2005, 09:50 AM
Sweet, that worked! But now the main.htm page (the default load page for the 'main' frame) doesn't refresh itself when the page is first loaded. Was there something I needed to tweak in the main script? This rocks, thanks man! I really appreciate it.


//Set theURL to the initial page for 'main'
var resetVar, theURL="main.htm";
function refresh() {
window.frames['main'].window.location.replace(theURL);
resetVar=setTimeout('refresh()', 60*1000*5);
}
function reset(url){
clearTimeout(resetVar)
if (typeof url!=='undefined'&&url!=='hold')
theURL=url
else if (typeof url!=='undefined'&&url=='hold')
return;
resetVar=setTimeout('refresh()', 60*1000*5);
}

KE5EHI
12-28-2005, 10:13 AM
One more (sorry to take up this much time), if there's a page loaded into the 'main' frame already that has links (ie the 'Info' page which has links) that will load in the 'main' frame, they don't need the onclick code right?

Example: When you click the 'Page Info' in the top menu (which uses the onclick tag for 'hold'), it loads a page (info.htm) in the 'main' frame with links on it. Those links (that are in info.htm which is loaded in 'main' frame), which when clicked, will load whatever they link to in the 'main' frame, don't need an onclick right?

jscheuer1
12-28-2005, 11:33 AM
On your version of the script, you left out one bit at the end:


//Set theURL to the initial page for 'main'
var resetVar, theURL="main.htm";
function refresh() {
window.frames['main'].window.location.replace(theURL);
resetVar=setTimeout('refresh()', 60*1000*5);
}
function reset(url){
clearTimeout(resetVar)
if (typeof url!=='undefined'&&url!=='hold')
theURL=url
else if (typeof url!=='undefined'&&url=='hold')
return;
resetVar=setTimeout('refresh()', 60*1000*5);
}
reset();

Add that only if you want main.htm to refresh every 5 minutes. Without that added bit, main.htm will just sit there until changed, acting as though it had been loaded using the 'hold' parameter as described below. This is a special case only because it is the initial load of the page.

Now, I tried to explain the situation about links on pages loaded into the main frame, here is another version of that explanation. Once a page is loaded into the main frame, unless it was loaded there with the 'hold' parameter:


<a href="info.htm" onclick="parent.window.reset('hold');return true;" target="main">Page Info</a>

It will either refresh itself every 5 minutes or revert to the previous page or revert to the page that was passed with the last link. The only way to change this when a new link is clicked, is to have one of the 4 onclick events attributed to the new link. Makes no difference if this link happens to be on the page that is in the main frame.

On the other hand, if a page is loaded into the main frame using the 'hold' parameter, the refresh cycle is broken and all links on that page can be just ordinary links as long as you don't want the pages they link to being refreshed, and the pages they bring up in main can be ordinary as well until a link with one of the other three onclick events is used. At that point the refresh cycle will start again.

Go back over the post where I have the four type of links described, to see what each does.

KE5EHI
12-28-2005, 01:14 PM
Works like a champ! Thanks for all the help John, that just made my life a whole lot easier with this page. :D