loop, stop, and then refresh? [Archive]

dukevn

12-09-2009, 02:10 AM

Hi all,

My title says quite a bit of what I want to do: I want to create a page that can automatically refresh every, say 1 minutes. Each time when the page loads, it should auto load and loop some sites through an iframe. I came up with the below code:
<html>
<head>
<meta http-equiv="refresh" content="60">
<title>Refesh and Loop</title>
<script type="text/javascript">

var pages = [];
pages[0] = "http://www.google.com";
pages[1] = "http://www.bing.com";
pages[2] = "http://www.ask.com";
pages[3] = "http://www.altavista.com";

var i = 0;

function loopFrame() {
// get the frame
var frame = document.getElementById("iFrame");
frame.src = pages[i];
}

function updateFrame() {
if ( i<pages.length ) {
setTimeout(function(){loopFrame();}, 5000);
i++;
} else {
var frame = document.getElementById("iFrame");
frame.src = pages[0];
}
}
</script>
</head>
<body>
<iframe id="iFrame" src="http://www.google.com" onload="updateFrame();" width="100%"
height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="yes" noresize>
</iframe>
</body>
</html>
This is actually not doing what I want. The code still loops forever and certainly eats up a lot of CPU. My question is: how to tell the updateFrame function to stop when the loop already finished the last page? Is there a command in javascript to do that?

EDIT: I think I did a bad job explaining above. I wonder what code I should use in the else {} condition that simple stop updateFrame function. Or any other suggestion for updateFrame that just runs setTimeout command when i is smaller than the length of pages.

Thanks,

D.

jscheuer1

12-09-2009, 05:39 AM

Well, none. If you load anyway, even when i is out of range, you keep triggering the onload event, and at that point in rapid succession. Also, why a meta refesh? You may loop the iframe back to the start without refreshing the page. Then, for that matter, why only 5 seconds between iframe changes? May as well use up the whole minute, or use less than a minute between ending and starting over. Why end at the beginning? When the page reloads and/or the loop starts over, there will be no perceptible change, though some browsers will appear to reload the iframe.

All that said, other than fix some code irregularities and the rapid succession changes that occur as i goes out of range, here's a working demo of what I think you say you want:

<html>
<head>
<meta http-equiv="refresh" content="60">
<title>Refesh and Loop</title>
<script type="text/javascript">
(function(){
var frame, i = 0, pages = [], attach = (function(){
return window.addEventListener? function(el, ev, f){el.addEventListener(ev, f, false);} :
window.attachEvent? function(el, ev, f){el.attachEvent('on' + ev, f)} : function(){return;};
})();
pages[0] = "http://www.google.com";
pages[1] = "http://www.bing.com";
pages[2] = "http://www.ask.com";
pages[3] = "http://www.altavista.com";

function updateFrame(){
if (i++ < pages.length){
setTimeout(function(){frame.src = pages[i % pages.length];}, 5000);
}
}

function load(){
frame = document.getElementById('iFrame');
attach(frame, 'load', updateFrame);
frame.src = pages[0];
};

attach(window, 'load', load);
})();
</script>
</head>
<body>
<iframe id="iFrame" src="about:blank" width="100%"
height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="yes" noresize>
</iframe>
</body>
</html>

But if you consider some of my other questions and want help to implement any of the procedures they suggest, or just want more help in general, let me know.

dukevn

12-09-2009, 01:49 PM

Well, none. If you load anyway, even when i is out of range, you keep triggering the onload event, and at that point in rapid succession. Also, why a meta refesh? You may loop the iframe back to the start without refreshing the page. Then, for that matter, why only 5 seconds between iframe changes? May as well use up the whole minute, or use less than a minute between ending and starting over. Why end at the beginning? When the page reloads and/or the loop starts over, there will be no perceptible change, though some browsers will appear to reload the iframe.What I want is to have two loops in a page: it refreshes (or reloads, or anything similar) in a certain amount of time (1 min is just example); in each of its refresh, it should visit through some certain sites in a certain amount of time (4 sites and 5 seconds are just example). It should not end at the beginning, but I do not know which command I should put there, so I just put those commands for example only.
All that said, other than fix some code irregularities and the rapid succession changes that occur as i goes out of range, here's a working demo of what I think you say you want:

<html>
<head>
<meta http-equiv="refresh" content="60">
<title>Refesh and Loop</title>
<script type="text/javascript">
(function(){
var frame, i = 0, pages = [], attach = (function(){
return window.addEventListener? function(el, ev, f){el.addEventListener(ev, f, false);} :
window.attachEvent? function(el, ev, f){el.attachEvent('on' + ev, f)} : function(){return;};
})();
pages[0] = "http://www.google.com";
pages[1] = "http://www.bing.com";
pages[2] = "http://www.ask.com";
pages[3] = "http://www.altavista.com";

function updateFrame(){
if (i++ < pages.length){
setTimeout(function(){frame.src = pages[i % pages.length];}, 5000);
}
}

function load(){
frame = document.getElementById('iFrame');
attach(frame, 'load', updateFrame);
frame.src = pages[0];
};

attach(window, 'load', load);
})();
</script>
</head>
<body>
<iframe id="iFrame" src="about:blank" width="100%"
height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="yes" noresize>
</iframe>
</body>
</html>

But if you consider some of my other questions and want help to implement any of the procedures they suggest, or just want more help in general, let me know.
Your code does the main thing of what I wanted. The only tiny thing is that it stops at the beginning.

Honestly I can understand some portion of your code, but some of them are mystery for me :). What does (function(){...})()do, and the attach varattach = (function(){
return window.addEventListener? function(el, ev, f){el.addEventListener(ev, f, false);} :
window.attachEvent? function(el, ev, f){el.attachEvent('on' + ev, f)} : function(){return;}; is quite advance, I can not get any sense out of it :(

Thanks,

D.

jscheuer1

12-09-2009, 03:20 PM

This:

(function(){...})()

usually with an appropriate terminus at the end (, or ;) depending upon where it appears in the code, unless as the last property/item in a literal object or array, is the self executing anonymous function. It is used twice in the code. First as a container/wrapper to limit the scope of the code. It makes the code entirely private, so as that its variable and function names cannot conflict with any other code you may add to the page. Second as a function to return one of two possible functions, depending upon which method the browser supports for adding/attaching events, or an empty function if neither is supported. All modern browsers (from Firefox 1, IE 5, etc.) support one or the other or both. So if the browser supports addEventListener, it will use that, otherwise, it is most likely IE, but whatever it is, it will use attachEvent if available in it. Legacy browsers will not run the code, and don't support iframe anyway. This is done one time as the code loads, so after that, no branching is required. The method a browser uses to do this cannot change once the page has loaded, so no need to branch each time this type of thing is needed.

That should answer your questions, but if you have more on that or anything else, feel free to ask. Here's the updated code, fulfilling what I now believe to be your requirements. Notice its configuration area at the end:

(function(){
var overRate, indRate, frame, i, pages = [], attach = (function(){
return window.addEventListener? function(el, ev, f){el.addEventListener(ev, f, false);} :
window.attachEvent? function(el, ev, f){el.attachEvent('on' + ev, f)} : function(){return;};
})();

function updateFrame(){
if (++i < pages.length){
setTimeout(function(){frame.src = pages[i % pages.length];}, indRate * 1000);
}
}

function load(init){
if(init !== null){
frame = document.getElementById('iFrame');
attach(frame, 'load', updateFrame);
}
i = 0;
frame.src = pages[0];
setTimeout(function(){load(null);}, overRate * 1000);
};

attach(window, 'load', load);

//Configure Rates:
overRate = 60; //seconds between over all cycles
indRate = 5; //seconds between individual iframe page changes
//Configure Pages:
pages[0] = "http://www.google.com";
pages[1] = "http://www.bing.com";
pages[2] = "http://www.ask.com";
pages[3] = "http://www.altavista.com";
})();

The rest of the page has not changed. Except you must now remove:

<meta http-equiv="refresh" content="60">

But unless required for some other code, you may also remove the highlighted:

<iframe id="iFrame" src="about:blank" width="100%"
height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="yes" noresize>
</iframe>

dukevn

12-09-2009, 04:50 PM

This:

(function(){...})()

usually with an appropriate terminus at the end (, or ;) depending upon where it appears in the code, unless as the last property/item in a literal object or array, is the self executing anonymous function. It is used twice in the code. First as a container/wrapper to limit the scope of the code. It makes the code entirely private, so as that its variable and function names cannot conflict with any other code you may add to the page. Second as a function to return one of two possible functions, depending upon which method the browser supports for adding/attaching events, or an empty function if neither is supported. All modern browsers (from Firefox 1, IE 5, etc.) support one or the other or both. So if the browser supports addEventListener, it will use that, otherwise, it is most likely IE, but whatever it is, it will use attachEvent if available in it. Legacy browsers will not run the code, and don't support iframe anyway. This is done one time as the code loads, so after that, no branching is required. The method a browser uses to do this cannot change once the page has loaded, so no need to branch each time this type of thing is needed.
Thanks for your excellent explanation. So (function(){...})() is for private part (so if there is no other codes, or if I am not afraid of names/variables conflict, then I do not need it); and the attach part is to make the code works cross-browsers.That should answer your questions, but if you have more on that or anything else, feel free to ask. Here's the updated code, fulfilling what I now believe to be your requirements. Notice its configuration area at the end:
...
You are superb as always, John. Thank you very much, the code works just fine. Now I have another question (not really related to the original question, so if I am doing something wrong, please let me know, I can create new thread for it), if you do not mind: how do I update the page title<title>Refesh and Loop</title>with the title of any page in the iframe?

Thanks,

D.