Jump to content

Wait & load in frame


Ahamad
 Share

Recommended Posts

:) Why would you want to do that? Also, what happens when you "finish"?Put your URLs in an array, then set a timer (probably an interval) to call a function which changes the URL and increments the index used for the array of URLs. When no URL is found in the array at the incremented index, stop the process and "finish."See these functions:setIntervalclearIntervalsetTimeoutclearTimeout
Link to comment
Share on other sites

I have made thing like this

<html><head><script type="text/javascript">function updateFrame() { document.getElementById("loopingFrame");updateFrame.count = 1;var a = updateFrame.count;	if (a == 1) {	frame.src = "www.google.com";	};	if (a == 2) {	frame.src = "www.yahoo.com";	};	if (a == 3) {	frame.src = "www.msn.com";	};};</script></head><body><iframe id="loopingFrame" src="notes.txt" onload="if(updateFrame.count < 4) setTimeout(updateFrame, 5000);"> </iframe></body></html>

Whats wrong in it.

Link to comment
Share on other sites

I found the correct script.

<html><head><script type="text/javascript">function updateFrame() {var f = document.getElementById("loopingFrame");var a = ++updateFrame.count;	if (a == 1) {	f.src = "http://www.google.com/";	}	if (a == 2) {	f.src = "http://www.yahoo.com/";	}	if (a == 3) {	f.src = "http://www.msn.com/";	}};updateFrame.count = 0;</script></head><body><iframe id="loopingFrame" src="about:blank" onload="if(updateFrame.count < 4) setTimeout(updateFrame, 5000);"></iframe></body></html>

Hehe

Link to comment
Share on other sites

Why are you using updateFrame as an object and re-assigning it to a just before you check the conditionals? It would be easier just to use a as a global var in the first place.A switch would also be more efficient.

Link to comment
Share on other sites

I think he's using the function as an object to avoid polluting the global namespace, and I agree with that principle. However, a solution that's better than both (in my opinion) is a closure.Acoder, a closure is the entire scope of (that is, all the variables accessible from within) one function sticking to a second function wherever the second goes. A closure is formed when one function is defined inside another.To demonstrate exactly how my code is different from yours, I'll transform yours into mine. First, I indent, remove empty lines, and remove the unnecessary "a" variable.

<html>    <head>        <script type="text/javascript">            function updateFrame() {                var f = document.getElementById("loopingFrame");                ++updateFrame.count;                if (updateFrame.count == 1) {                    f.src = "http://www.google.com/";                }                if (updateFrame.count == 2) {                    f.src = "http://www.yahoo.com/";                }                if (updateFrame.count == 3) {                    f.src = "http://www.msn.com/";                }            };            updateFrame.count = 0;        </script>    </head>    <body>        <iframe id="loopingFrame" src="about:blank" onload="if(updateFrame.count < 4) setTimeout(updateFrame, 5000);"></iframe>    </body></html>

Now I'll centralize your URLs into an array and only find the frame once (because the method is expensive). Because elements don't exist until the document is loaded, I'll also move the script to the body and eliminate the unnecessary head. (I could use window.onload instead; see this article for why I would rather not.)

<html>    <body>        <iframe id="loopingFrame" src="about:blank" onload="if(updateFrame.count < 4) setTimeout(updateFrame, 5000);"></iframe>        <script type="text/javascript">            var f = document.getElementById("loopingFrame");                        //Occupy index 0 with a placeholder.            var URLs = [undefined, "http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/"];                        function updateFrame() {                ++updateFrame.count;                if (updateFrame.count == 1) {                    f.src = URLs[1];                }                if (updateFrame.count == 2) {                    f.src = URLs[2];                }                if (updateFrame.count == 3) {                    f.src = URLs[3];                }            };            updateFrame.count = 0;        </script>    </body></html>

Now let's use the array in a more efficient (or at least more orthodox) manner. I'll use index 0 and access the indexes (and the length) directly. I'll also move the iframe's onload into the JS because inline event handlers are bad.

<html>    <body>        <iframe id="loopingFrame" src="about:blank"></iframe>        <script type="text/javascript">            var f = document.getElementById("loopingFrame");            var URLs = ["http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/"];            f.onload = function(){                if(updateFrame.count < URLs.length)                    setTimeout(updateFrame, 5000);            };            f.onload();                        function updateFrame() {                f.src = URLs[updateFrame.count];                ++updateFrame.count;            };            updateFrame.count = 0;        </script>    </body></html>

The setInterval function is designed for this purpose more than setTimeout, so I'll use it now. This requires that the loop be explicitly terminated rather than not continued, so the updateFrame function will handle that.

<html>    <body>        <iframe id="loopingFrame" src="about:blank"></iframe>        <script type="text/javascript">            var f = document.getElementById("loopingFrame");            var URLs = ["http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/"];            var interval = setInterval(updateFrame, 5000);                        function updateFrame() {                f.src = URLs[updateFrame.count];                ++updateFrame.count;                if(updateFrame.count >= URLs.length)                    clearInterval(interval);            };            updateFrame.count = 0;        </script>    </body></html>

Now for the closure. I'll wrap everything (except the array) in a function and call it. Since we're no longer in the global namespace, I'll also change the count variable to reflect that.

<html>    <body>        <iframe id="loopingFrame" src="about:blank"></iframe>        <script type="text/javascript">            function loopFrame(f, addresses, delay){                f = document.getElementById(f);                var interval = setInterval(updateFrame, delay);                var count = 0;                                function updateFrame() {                    f.src = addresses[count];                    count++;                    if(count >= addresses.length)                        clearInterval(interval);                };            }            var URLs = ["http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/"];            loopFrame('loopingFrame', URLs, 5000);        </script>    </body></html>

Now let's make our arguments dynamic. If the first argument isn't a string, we'll assume it's the frame itself. And if the delay isn't given, it will default to 10 seconds (your original value).

<html>    <body>        <iframe id="loopingFrame" src="about:blank"></iframe>        <script type="text/javascript">            function loopFrame(f, addresses, delay){                f = typeof f === 'string' ? document.getElementById(f) : f;                var interval = setInterval(updateFrame, delay || 10000);                var count = 0;                                function updateFrame() {                    f.src = addresses[count];                    count++;                    if(count >= addresses.length)                        clearInterval(interval);                };            }            var URLs = ["http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/"];            loopFrame('loopingFrame', URLs);        </script>    </body></html>

Finally, I'll refactor the identifiers so they look exactly like mine. (You might have noticed that I snuck a few trivial changes in along the way.)

<html>    <body>        <iframe id="frame" src="about:blank"></iframe>        <script type="text/javascript">            function loopFrame(frame, addresses, delay){                frame = typeof frame === 'string' ? document.getElementById(frame) : frame;                var interval = setInterval(iterate, delay || 10000);                var i = 0;                                function iterate() {                    frame.src = addresses[i];                    i++;                    if(i >= addresses.length)                        clearInterval(interval);                }            }            var URLs = ["http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/"];            loopFrame('frame', URLs);        </script>    </body></html>

Link to comment
Share on other sites

On the last call to iterate (in an else block), set a 16-second timeout for a function A. Inside A, change the iframe's URL and set a 19-second timeout for another function B. Inside B, change the iframe's URL.I want you to try again before I give any more effort. For me, the purpose of this thread is that you gradually learn to code on your own.

Link to comment
Share on other sites

Ignore what I said about the else block; I was thinking of my intermediate structure. Notice that, while I named the iterate function (and it's a good thing because now I need to reference it twice), I'm passing this new function directly to setTimeout - just because I'm not sure what to name it. I'm also not assigning the return value to a variable because I don't need to clear the timeout.Also, if you keep refusing to try, that will make my purpose impossible and helping won't be worth my time.

<html>	<body>		<iframe id="frame" src="about:blank"></iframe>		<script type="text/javascript">			function loopFrame(frame, steps, delay){				if(typeof frame === 'string')					document.getElementById(frame);				if(typeof delay !== 'number')					delay = 10000;				var i = 0;				iterate();								function iterate() {					if(i < addresses.length){						if(typeof steps[i] === 'string')							steps[i] = new Step(steps[i], delay);						setTimeout(function (){								frame.src =  steps[i].url;								i++;								iterate();							}, steps[i].delay);					}				}			}			function Step(url, delay){				this.url = url;				this.delay = delay;			}			var steps = ["http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/", new Step("http://www.good.com/", 16000), new Step("http://www.bad.com/", 16000)];			loopFrame('frame', steps);		</script>	</body></html>

Link to comment
Share on other sites

What about another frame.I want 2 frames. REad again.In above frame after 3 websites are loaded, 4th website "www.good.com" should be loaded after 16 secs. There should be another frame in which "www.bad.com" should be loaded after 19 secs. How. ???Alsao when I open ur above given code, It shows blank frame:(

Link to comment
Share on other sites

  • 2 weeks later...

I'm a nitwit; I didn't keep the frame after looking its ID up, so I was making properties on a string. The simplest bugs are often the most formidable. (And a fresh look is often their only solution.)

<html>	<body>		<iframe id="frame" src="about:blank"></iframe>		<script type="text/javascript">			function loopFrame(frame, steps, delay){				if(typeof frame === 'string')					frame = document.getElementById(frame);				if(typeof delay !== 'number')					delay = 10000;				var i = 0;				iterate();										function iterate() {					if(i < steps.length){						if(typeof steps[i] === 'string')							steps[i] = new Step(steps[i], delay);						setTimeout(function (){								alert(steps[i].url);								frame.onload = function (){										alert('');									};								frame.src = steps[i].url;								i++;								iterate();							}, steps[i].delay);					}				}			}			function Step(url, delay){				this.url = url;				this.delay = delay;			}			var steps = ["http://www.google.com/", "http://www.yahoo.com/", "http://www.msn.com/", new Step("http://www.good.com/", 16000), new Step("http://www.bad.com/", 16000)];			loopFrame('frame', steps);		</script>	</body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...