PDA

View Full Version : 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



<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 (http://www.regular-expressions.info/tutorial.html) expressions (http://www.regular-expressions.info/javascript.html) 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.)


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.
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."
window._GET = {};"Make _GET a global variable and put an empty object (so no fields are reserved for array things like 'length') in it."
for(var i = 0; i < array.length; i++){"For each of the indices in array,...
var assign = array[i].indexOf('=');"Get the position of '=' in the current array element."
if(assign == -1){"If the current array element doesn't contain '=', ..."
_GET[array[i]] = true;"In the _GET object, associate the value of this array element with a boolean value of true."
}else{"Otherwise,..."
_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:

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:
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 :D 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 (en.wikipedia.org/wiki/Lynx_(web_browser)) 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 (http://weblogs.asp.net/wallen/archive/2003/05/08/6750.aspx) variables (http://www.yuiblog.com/blog/2006/06/01/global-domination/), 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.

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
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:


location.search

?

Example:


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.



<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?

jscheuer1
07-11-2010, 02:47 AM
Cheating at games is not exactly what this forum is for, even if you are willing to share your cheat with other players, though that last part is commendable in my opinion.

Anyways, you might find these functions helpful:


<script type="text/javascript">
function checkFrom(frameName){
alert(getQval('from', document.getElementsByName(frameName)[0].src));
}
function changeFrom(frameName, val){
var from = document.getElementsByName(frameName)[0].src;
val = val.replace(/ +/g, '+');
document.getElementsByName(frameName)[0].src = from.replace(/(from=)[^&]*/, '$1' + val);
}
function refreshFrame(frameName){
var curr = document.getElementsByName(frameName)[0].src;
document.getElementsByName(frameName)[0].src = 'about:blank';
setTimeout(function(){document.getElementsByName(frameName)[0].src = curr;}, 0);
}
function getQval(n, m){
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]'+n+'=([^&;#]*)'); m = m || location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
</script>

Here's a demo:

http://home.comcast.net/~jscheuer1/side/from/

The page that's in the iframe alerts it query string (location.search) onload. The rest is pretty self explanatory, except that I make no use of the refreshFrame function. Its sole purpose is to refresh an iframe by name. I'm sure you can find a use for it.

The rest of the demo relies solely upon the src attribute of the iframe for interaction with it, which is the only way you can interact with pages in an iframe that are from a different domain.

Anyways, to use the demo, enter a new value for from into the text box and then click the Change button. The page will reload and alert the value. At any point you may click the Check button to see the current value of from.

Any questions, feel free to ask.

GloryDan
07-11-2010, 08:16 AM
Thanks Heaps,

That does half the job, i've played around with it and cant figure out how to use the refresh function, sofar ive made it so theres a form for each iframe to change the "from=" and works well but is there a way so i only have to use 1 form for all iframes? this is the code i havce sofar



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function checkFrom(frameName){
alert(getQval('from', document.getElementsByName(frameName)[0].src));
}
function changeFrom(frameName, val){
var from = document.getElementsByName(frameName)[0].src;
val = val.replace(/ +/g, '+');
document.getElementsByName(frameName)[0].src = from.replace(/(from=)[^&]*/, '$1' + val);
}
function refreshFrame(frameName){
var curr = document.getElementsByName(frameName)[0].src;
document.getElementsByName(frameName)[0].src = 'about:blank';
setTimeout(function(){document.getElementsByName(frameName)[0].src = curr;}, 0);
}
function getQval(n, m){
/* n = name, m = searchString(optional) */
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]'+n+'=([^&;#]*)'); m = m || location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}

</script>
</head>
<body>
<div>
<form action="#" onsubmit="return false;">
<div>
<input type="button" value="Check" onclick="checkFrom('frame1');"> <input type="button" value="Change" onclick="changeFrom('frame1', this.form.newfrom.value);"> <label>New From: <input type="text" name="newfrom"></label>

</div>
</form>
</div>
</form>
<center><h4>Vaccuum Tube</h4></center></font>
<center><iframe name='frame1' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=4c503f65c4f31e4e0b40e7b8a3a863b2&time=1277982972&from=1&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>
<form action="#" onsubmit="return false;">
<div>
<input type="button" value="Check" onclick="checkFrom('frame2');"> <input type="button" value="Change" onclick="changeFrom('frame2', this.form.newfrom.value);"> <label>New From: <input type="text" name="newfrom"></label>

</div>
</form>
</div>
</form><center><h4>Science Book</h4></center></font>
<center><iframe name='frame2' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=fd029289c68f14a5cb715b72a84c1378&time=1277982952&from=1&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>
<form action="#" onsubmit="return false;">
<div>
<input type="button" value="Check" onclick="checkFrom('frame3');"> <input type="button" value="Change" onclick="changeFrom('frame3', this.form.newfrom.value);"> <label>New From: <input type="text" name="newfrom"></label>

</div>
</form>
</div>
</form><center><h4>Flux Switch</h4></center></font>
<center><iframe name='frame3' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=d3a7a7731c3162f05f8ec20ed3a94d98&time=1277982924&from=1&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>
<form action="#" onsubmit="return false;">
<div>
<input type="button" value="Check" onclick="checkFrom('frame4');"> <input type="button" value="Change" onclick="changeFrom('frame4', this.form.newfrom.value);"> <label>New From: <input type="text" name="newfrom"></label>

</div>
</form>
</div>
</form><center><h4>Tesla Coil</h4></center></font>
<center><iframe name='frame4' width="900" height="250" frameborder="0" scrolling="no" src='http://apps.facebook.com/cafeworld/accept_request.php?sk=c9ab22961c07266d1627a6a98290d95e&time=1277982885&from=1&p=tab_send_free_gift&gid=1836&channel=request&action=accept_gift&k=build_a_lightning_stove&ref=free_gift_ls_tab'></iframe></center>
<br>
</div>
</body>
</html>


I tryed this for the refresh function



function refreshFrame(frameName){
var curr = document.getElementsByName(frameName)[0].src;
document.getElementsByName(frameName)[0].src = 'frame1';
document.getElementsByName(frameName)[0].src = 'frame2';
document.getElementsByName(frameName)[0].src = 'frame3';
document.getElementsByName(frameName)[0].src = 'frame4';
setTimeout(function(){document.getElementsByName(frameName)[0].src = curr;}, 10000);


But it dont work that way :( and tryed a few other ways but nun seem to work

Thanks Again and Again and Again

Dan

jscheuer1
07-11-2010, 11:10 AM
OK, I changed things around a bit and added helper functions to perform the changed functions for all iframes on the page:


<script type="text/javascript">
function checkFrom(frame){
return getQval('from', frame.src);
}
function changeFrom(frame, val){
var from = frame.src;
val = val.replace(/ +/g, '+');
frame.src = from.replace(/(from=)[^&]*/, '$1' + val);
}
function refreshFrame(frame){
var curr = frame.src;
frame.src = 'about:blank';
setTimeout(function(){frame.src = curr;}, 0);
}
function getQval(n, m){
/* n = name, m = searchString(optional) */
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]'+n+'=([^&;#]*)'); m = m || location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
refreshFrame.all = function(){
var frames = document.getElementsByTagName('iframe'), i = frames.length - 1;
for (i; i > -1; --i){
refreshFrame(frames[i]);
}
};
changeFrom.all = function(val){
var frames = document.getElementsByTagName('iframe'), i = frames.length - 1;
for (i; i > -1; --i){
changeFrom(frames[i], val);
}
};
checkFrom.all = function(val){
var frames = document.getElementsByTagName('iframe'), i = frames.length - 1, results = '';
for (i; i > -1; --i){
results += frames[i].name + '\'s from = ' + checkFrom(frames[i]) + '<br>';
}
document.getElementById('report').innerHTML = results;
};
</script>

And here's the new demo:

http://home.comcast.net/~jscheuer1/side/from_2/

No more alerts. Each page in the iframe reports it's from value in its text. Check All generates a report on the top page.

This could all be done a bit more efficiently, but I'm thinking this is OK and probably easier to follow.

Let me know if you have more questions.

Jesdisciple
07-11-2010, 01:30 PM
EDIT: D'oh, beat again.


I know its not the best coding but it works...Would you like criticism on it or not? Most coders have things to learn from each other, especially new ones - and my advise (here, it's free!) would be to guzzle as much constructive criticism as you can.

I have to ask, though, how is the "from=" useful? Do you actually store all the id's of people who have visited in a database so you can check new visitors against them, or try to find yourself in the visitor's extended network of friends? If not, why not just forget the whole deal about changing the URLs? (Also, just so you know - anyone who knows JavaScript can easily hack your page and make it work despite any safeguards you might code in JavaScript, so long as they're more determined than you.)

Anyway, here's a simple form that can be hooked up to the JavaScript I posted earlier via some more JavaScript. I'm going to do my best to explain as I go along, but ask questions if you're not clear on something.
<form name="refresh_controls">
<input type="text" name="friend" />
<input type="button" name="start" value="Start" />
<input type="button" name="stop" value="Stop" />
</form>(I can't really say much about this until we get to the JavaScript part...)