Input into part of iframe url using javascript to refresh iframes

**GloryDan** · 07-06-2010, 07:26 AM

Hi all,
I have searched for this everywhere and cant find anything similar so here is my question....

I currently have a page that has 4 iframes and i use this code to refresh them

Code:

<script type=text/javascript>
	function refresh()
	 {
		document.all.iframe1.src = document.all.iframe1.src;
		document.all.iframe2.src = document.all.iframe2.src;
		document.all.iframe3.src = document.all.iframe3.src;
		document.all.iframe4.src = document.all.iframe4.src;
	 }
		window.setInterval("refresh()",10000);
</script>
<center><iframe name='iframe1' width="900" height="250" frameborder="0" scrolling="no" src='http://blah.com/blah/blah.php?sk=blah&time=blah&from=blah&p=blah&gid=blah&channel=blah&action=blah&k=blah&ref=blah'></iframe></center>
<center><iframe name='iframe2' width="900" height="250" frameborder="0" scrolling="no" src='http://blah.com/blah/blah.php?sk=blah&time=blah&from=blah&p=blah&gid=blah&channel=blah&action=blah&k=blah&ref=blah'></iframe></center>
<center><iframe name='iframe3' width="900" height="250" frameborder="0" scrolling="no" src='http://blah.com/blah/blah.php?sk=blah&time=blah&from=blah&p=blah&gid=blah&channel=blah&action=blah&k=blah&ref=blah'></iframe></center>
<center><iframe name='iframe4' width="900" height="250" frameborder="0" scrolling="no" src='http://blah.com/blah/blah.php?sk=blah&time=blah&from=blah&p=blah&gid=blah&channel=blah&action=blah&k=blah&ref=blah'></iframe></center>

What i need is to have a input to all 4 iframe urls for the "from=" part of the url, but leaving the rest of the url as is, and the iframes refreshes a given number of times., is there a way to do this????

Also need a stop and go button on the iframe refresh script...

Hope i have given an understanding explanation for this..

Thanks in advance

Dan

**Jesdisciple** · 07-06-2010, 12:32 PM

You can use either regular expressions or ordinary string manipulations. A while back I wrote a script which retrieves all the GET variables from the query string and puts them in _GET just like in PHP, and it does almost all the string manipulations for you. (I think the only thing it doesn't do is reorganize _GET into a new URL, but that wouldn't be too difficult to write.)

Code:

window.GET = function(){
	var array = window.location.search.split(/&;/):
		//URLs can be like either "sample.html?test1=hi&test2=bye" or
			//"sample.html?test1=hi;test2=bye"
	window._GET = {};
	for(var i = 0; i < array.length; i++){
		var assign = array[i].indexOf('=');
		if(assign == -1){
			_GET[array[i]] = true;//if no value, treat as boolean
		}else{
			_GET[array[i].substring(0, assign)] = array[i].substring(assign + 1);
		}
	}
}

If you're interested in how it works, read on; if not, scroll down to the instructions.

Code:

	var array = window.location.search.split(/&;/):

"Get the query string (or 'search string'), if any, from the URL and make array equal to the pieces of that string divided by '&'s and ';'s."

Code:

	window._GET = {};

"Make _GET a global variable and put an empty object (so no fields are reserved for array things like 'length') in it."

Code:

	for(var i = 0; i < array.length; i++){

"For each of the indices in array,...

Code:

		var assign = array[i].indexOf('=');

"Get the position of '=' in the current array element."

Code:

		if(assign == -1){

"If the current array element doesn't contain '=', ..."

Code:

			_GET[array[i]] =  true;

"In the _GET object, associate the value of this array element with a boolean value of true."

Code:

		}else{

"Otherwise,..."

Code:

			_GET[array[i].substring(0, assign)] =  array[i].substring(assign + 1);

"In the _GET object, associate the value of this array element from its first character to that '=' (the name of the GET parameter) with the value of the same array element from just after that '=' to the end (the value of the GET parameter)."

This is how you make sure all GET parameters are available from anywhere in your script:

Code:

window.GET();

Simple GET() would also work, unless a variable with an identical name were declared locally. (If another variable named GET is declared globally, one of these two variables would overwrite the other, and the function might not work.)

So, if the URL is example.com/test.html?test1=hi&test2=bye, then this:

Code:

window.GET();
alert(_GET['test1']);
alert(_GET.test1);
alert(_GET['test2']);
alert(_GET.test2);

will alert "hi" twice, then "bye" twice.

**GloryDan** · 07-06-2010, 09:15 PM

Wow Thanks For That I can use that elswhere

but wasnt wot i needed here.....
I think i didnt explain myself.... The input to the url needs to come from the user, so im guessing this needs to be in the way of a form?
The iframe urls will always be the same only thing that changes is wot the user inputs into a text box then clicks a go button then all 4 iframes refresh with new user input into the url, sorry for explaining properly

Thanks again

Dan

**Jesdisciple** · 07-07-2010, 01:32 AM

Oh, OK. Firstly, since you're using both iframes and JavaScript I'm guessing that you haven't gone to the trouble of designing an alternative, text-only version of this resource such as could be read by a Lynx user, a search-engine's web-crawler, or a blind person's aural browser. If the information would be useful in such a context, I want to encourage you to do this, using the same content for both versions and building this one on top of the text-only one.

To avoid making global variables, I'm encapsulating the functions in an anonymous function which is immediately called, and associating them to an object which is returned from that function. (Yeah, it takes a bit to wrap your head around this the first time you see it.) I'll resist the urge to turn it into a constructor because that's a lot of work which is probably unnecesssary; I doubt you'll have more than one of this script running at once.

Note that I made various changes to your original code to comply with other best practices. Please ask about any changes you don't understand.

Write a form with a text field and two buttons, and register event-listeners on it to call this code. I would like to see your resulting source, if you don't mind.

Code:

var iFrameManager = (function (){
	var that = {};
	var interval = null, from = null;
	var iframes = []; // List the iframe elements here.  For example:
	// var iframes = [document.getElementById('iframe1'),
			  document.getElementById('iframe2'),
			  document.getElementById('iframe3'),
			  document.getElementById('iframe4')];
	var templates = []; // List the URLs for those iframes in the same order.
	// Make sure to include a wildcard such as $ after the from= to make
		// the 'update' function easy to write.
	var urls = []; // Put the results of the 'update' function in here.
	
	function update(){
		// Incorporate the current 'from' into the URL by replacement so it becomes:
			// '...from=' + from + '...'
	}
	
	function refresh(){
		for(var i = 0; i < iframes.length; i++){
			iframes[i].src = urls[i];
		}
	}
	that.start = function (_from){
		// If the user has since updated the "from" URL parameter,
			// we need to trash everything and start over.
		if(from != _from){
			if(interval != null){
				that.stop();
			}
			from = _from;
			update();
		}
		interval = window.setInterval(refresh, 10000);
	};
	that.stop = function (){
		window.clearInterval(interval);
		interval = null;
	};
	return that;
})();

**jscheuer1** · 07-07-2010, 08:57 AM

Originally Posted by Jesdisciple

A while back I wrote a script which retrieves all the GET variables from the query string and puts them in _GET just like in PHP, and it does almost all the string manipulations for you.

Ever heard of:

Code:

location.search

?

Example:

Code:

alert(location.search);

**Jesdisciple** · 07-07-2010, 09:07 AM

Now that you mention it, I recall revising the script to use search rather than href, but that copy is not easily available to me so I retrieved another (older) version from my original post on another forum. Thanks for the reminder; I updated the source above.

**GloryDan** · 07-10-2010, 06:51 AM

Well after a few days of researching i cant figure it out lol ima newb to all this... u have given me the answer but i cant put it into practice and i dont want to ask u to do it all for me so ill keep tryin..... If i cant figure it out anychance i could get u to do it for me? Ifnot its kewl ill just keep trying

Thanks Again

Dan

**jscheuer1** · 07-10-2010, 09:55 AM

Are all of these pages, including the one with your iframe tags on it, on the same domain?

Also, why do you need to refresh them? I mean, just changing the location.search (preferred if they are all on the same domain) or the src (only option if they are not on the same domain) will cause the iframe to load that page with the new query string value.

**Jesdisciple** · 07-10-2010, 10:37 AM

It would help if you were to post the HTML source of the page in question, or better yet link to a live copy...

**GloryDan** · 07-11-2010, 02:21 AM

Well, the iframe pages are for a facebook game called cafeworld lol..

I found a lil cheat/glitch where i can keep refreshing the gifts sent to me and i keep getting them, i want to share this with every1 that plays the game, what i got already works but they need to be friends with me on facebook to use it and im upto like 2000 friends i dont even know...

So if i could change so that people can add there own friends "id's" to the "from=" i wont need every1 wanting to use it to be my friend...

The only change in the url is the "from=" , I'm not the only 1 that has discovered this and those people have the same sort page setup as i do now...

My page is http://cwlstoves.glorygamers.com (Note the iframes start when u load page)

i wish my brain could comprehend all this so i didn't have to ask, but i guess that's wot these help site r for....

I hope that sums it up for you and i really appreciate your time on this matter

Thanks Again

Dan

P.S. If you would just prefer the code here it is.

Code:

<style>
	body { background-color: #000000; }
</style>

<html>
<head>
 <title>Lightning Stoves Parts</title>
</head>

<body>
<script type=text/javascript>
	function refresh()
	 {
		document.all.iframe1.src = document.all.iframe1.src;
		document.all.iframe2.src = document.all.iframe2.src;
		document.all.iframe3.src = document.all.iframe3.src;
		document.all.iframe4.src = document.all.iframe4.src;
	 }
		window.setInterval("refresh()",10000);
</script>
    
<center><h1><font color="Gold" >Cafe World Lightning Stove Parts Glitch</h1></center>
<center><h4>Share On Facebook</h4></center></font>

<center><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript" src="http://feedjit.com/serve/?vv=538&amp;tft=3&amp;dd=0&amp;wid=5bc337dfa54a9b10&amp;pid=0&amp;proid=0&amp;bc=FFFFFF&amp;tc=000000&amp;brd1=012B6B&amp;lnk=135D9E&amp;hc=FFFFFF&amp;hfc=2853A8&amp;btn=C99700&amp;ww=200&amp;went=10"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>
<br>
<center><h1><font color="Gold" >Howto Use...</h1></center></font>
<p align="center"><font color="Gold" >1. You Must Be Logged Into Facebook!</p>
<p align="center"><font color="Gold" >2. You Must Be Friends On FaceBook With Me Glory Dan,If We Are Not Friends, Add Me <a href="http://www.facebook.com/addfriend.php?id=100001283331161">Here</a></p>
<p align="center"><font color="Gold" size="3">Now Let The 4 Frames Below Reload 5-10 Times Depending On How Many Stove Parts Are Needed<br> ( Frames Reload Every 10 Seconds )</p>

<p align="center"><font color="Gold" size="3">When You Think You Are Done... Click <a href="http://apps.facebook.com/cafeworld/?ref=bookmark">HERE</a>! To Load Cafe World And Recieve Your Lightning Stove</p>
<p align="center"><font color="Gold" size="3">This Can Be Done As Many Times As You Like<br>So <a href="javascript:void(0);" onclick="if(document.all) window.external.AddFavorite(window.document.location,window.document.title);">Bookmark This Page</a><br>Soon To Come Unlimited VIP Meals And Energy<br>Make Sure You Share With Your Friends This Wont Last For Ever</p>
<center><h4>Vaccuum Tube</h4></center></font>
<center><iframe name='iframe1' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=4c503f65c4f31e4e0b40e7b8a3a863b2&time=1277982972&from=100001283331161&p=tab_send_free_gift&gid=1834&channel=request&action=accept_gift&k=build_a_lightning_stove&ref=free_gift_ls_tab'></iframe></center>
<br><center><h4>Science Book</h4></center></font>
<center><iframe name='iframe2' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=fd029289c68f14a5cb715b72a84c1378&time=1277982952&from=100001283331161&p=tab_send_free_gift&gid=1835&channel=request&action=accept_gift&k=build_a_lightning_stove&ref=free_gift_ls_tab'></iframe></center>

<br><center><h4>Flux Switch</h4></center></font>
<center><iframe name='iframe3' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=d3a7a7731c3162f05f8ec20ed3a94d98&time=1277982924&from=100001283331161&p=tab_send_free_gift&gid=1833&channel=request&action=accept_gift&k=build_a_lightning_stove&ref=free_gift_ls_tab'></iframe></center>
<br><center><h4>Tesla Coil</h4></center></font>
<center><iframe name='iframe4' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=c9ab22961c07266d1627a6a98290d95e&time=1277982885&from=100001283331161&p=tab_send_free_gift&gid=1836&channel=request&action=accept_gift&k=build_a_lightning_stove&ref=free_gift_ls_tab'></iframe></center>
<table width="133" border="0" cellspacing="0" cellpadding="3"><tr><td align="center"><a href="http://www.website-hit-counters.com/" target="_blank"><img src="http://www.website-hit-counters.com/cgi-bin/image.pl?URL=396328-8450" alt="" title="" border="0" ></a></td></tr><tr><td align="center"><font style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #330006; text-decoration: none;"> <a href="http://www.website-hit-counters.com/" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #555556; text-decoration: none;" title="free web counter">free web counter</a> </font></td></tr></table>
</body>
</html>

I know its not the best coding but it works... just to add another thing i tryed to put this code in a custom phpbb page but the iframes wouldnt refresh why is that?