Setting iFrame src through JS from URL GET variables

JavaScript
1

I am passing a URL via the GET method url variables. The original URL looks like this:

http://www.domain.com/page.htm?PG=FORUMS&page=http://forums.domains.com/viewforum.php?f=14

The actual site is done in coldfusion and I do not have access to that or any other server side languages. PG=FORUMS is the page that contains the iframe and I need the iframe src to be the same as the “page” variable.

I attempted to throw together some scripts I found online and this is what I came up with:


<script language="javascript">
<!--
function getUrlVars() {
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for(var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
return vars;
}
-->
var hash = getUrlVars();
var forumpage = hash['page'];
window.frames["forum"].src = forumpage; 
</script>
<iframe id="forum" name="forum" src="http://forums.domain.com" width="555" height="2000" border="0" style="border: 0px solid #ffffff;"></iframe>

The first problem is that if the “page” url has additional variables in it, in the case of “http://forums.domains.com/viewforum.php?f=14”, it gets cut off at the “=”.

The second problem is setting the src = forumpage. I can’t seem to get this to work. Any ideas?

2

location.search is the part of the string after the ? so there is no need to reference location.href at all.

Perhaps use the following for the function so it returns the expected array.


function getUrlVars() {
var qsParm = new Array();
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0,pos);
var val = parms[i].substring(pos+1);
qsParm[key] = val;
}
}
return qsParm;
}

I advise against using hash as the name for the array as someone reading the code may get it confused with location.hash (which is the part of the address after the #)

3

How would I just put EVERYTHING after “PG=FORUMS&page=” into a single variable?

Basically everything after the first instance of “&” and “page=”, this way if the url in “page=” has its own url level variables they will not get cut off?

4

To prevent url variables from “page=” variable from braking your logic, you should run that second url from “page=” through escape function in javascript.
Running

escape('http://google.com?search=test');

will give you

http%3A//google.com%3Fsearch%3Dtest

and that string is what you need to put into your ‘page’ arguments in url

5

escape() was deprecated in JavaScript back in the 20th Century because it doesn’t always work. It was replaced by encodeURIComponent() and encodeURI() (depending on whether you want it encoding the = and & or not)

6

Thanks for that! I got that bit fixed up, now I need to make the iframe src = to the (now) decoded URL. I tried a couple of different scripts I found, but nothing seems to work… This is what I have so far:


<script language="javascript">
<!--
window.onload = updateiframe; //event handler (calls the function)
function updateiframe() {
  function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++) {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
  return vars;
  }
  var varArray = getUrlVars();
  var forumpage = decodeURIComponent(varArray['page']);
  window.frames["forum"].src = forumpage;
  //document.write(forumpage);
}
--> 
</script>
<iframe id="forum" name="forum" src="http://forums.domain.com" width="555" height="2000" border="0" style="border: 0px solid #ffffff;"></iframe>
7

not sure why window.frames code is not working, but you can try to access iframe with document.getElementById(‘forum’).src

If this is not working, debug if frame element you get back actually is an element and not undefined

8

Thank you guys for all the help! I got it to work! This is the final code:


<script language="javascript">
<!--
window.onload = updateiframe; //event handler (calls the function)
function updateiframe() {
  function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++) {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
  return vars;
  }
  var hash = getUrlVars();
  var forumpage = decodeURIComponent(hash['page']);
  document.getElementById('forum').src = forumpage;
}
-->
</script>


<iframe id="forum" name="forum" src="http://forums.netnutri.com" width="555" height="2000" border="0" style="border: 0px solid #ffffff;"></iframe>