Ahamad Posted November 8, 2008 Share Posted November 8, 2008 I want to Redirect after certein time in frame. e.gIn webpage there should be a frame. In this frame www.google.com should be loaded 1st then after 10 sec www.yahoo.com then after 10 sec www.msn.com. and then finish Link to comment Share on other sites More sharing options...
Jesdisciple Posted November 8, 2008 Share Posted November 8, 2008 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 More sharing options...
Ahamad Posted November 9, 2008 Author Share Posted November 9, 2008 HOW?PLEASE design a little script. I am new to coding Link to comment Share on other sites More sharing options...
Jesdisciple Posted November 9, 2008 Share Posted November 9, 2008 Please answer my questions. Frames are generally a bad idea and I want to be sure I agree with the use before I spend my time accomplishing it. Plus I need to know what "finish" means in order to implement it. Link to comment Share on other sites More sharing options...
Ahamad Posted November 9, 2008 Author Share Posted November 9, 2008 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 More sharing options...
Ahamad Posted November 9, 2008 Author Share Posted November 9, 2008 Plus I need to know what "finish" means in order to implement it.finish means nothing. Finish mean that work is finished. If its difficult than u can also write an infinite loop. Finish means that loop should be stopped Link to comment Share on other sites More sharing options...
Ahamad Posted November 9, 2008 Author Share Posted November 9, 2008 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 More sharing options...
Synook Posted November 9, 2008 Share Posted November 9, 2008 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 More sharing options...
Jesdisciple Posted November 9, 2008 Share Posted November 9, 2008 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 More sharing options...
Ahamad Posted November 17, 2008 Author Share Posted November 17, 2008 I want a difficult thing now.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. ??? Link to comment Share on other sites More sharing options...
Jesdisciple Posted November 17, 2008 Share Posted November 17, 2008 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 More sharing options...
Ahamad Posted November 17, 2008 Author Share Posted November 17, 2008 I am not a big coder man, Please do it and show me the script. I don't understand what u r saying Link to comment Share on other sites More sharing options...
Jesdisciple Posted November 17, 2008 Share Posted November 17, 2008 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 More sharing options...
Ahamad Posted November 18, 2008 Author Share Posted November 18, 2008 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 More sharing options...
Jesdisciple Posted November 18, 2008 Share Posted November 18, 2008 That's a very weird bug. I wish I had tested while building that version, but it's too late now. Do you want to work on it with me? Link to comment Share on other sites More sharing options...
Ahamad Posted December 2, 2008 Author Share Posted December 2, 2008 My computer was repaired which took a week. Now I want to start work again Link to comment Share on other sites More sharing options...
Jesdisciple Posted December 2, 2008 Share Posted December 2, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.