Pass parameters in URL to dynamically build the src for an iFrame on another page

Started off in the HTML section, but think I've narrowed this down with some help.

I would like to be able pass parameters via a URL and have them picked up on the target page (could be a link or created from a form). This target page would have an IFRAME whose src I need to update with a URL I construct based on the parameters passed in the URL.

Everything must be done in the client since my hosting platform does not support any server side scripting. Also, it needs to be in javascript and all I know is vbscript. I'm not strong in web scripting.

I think what I need to know is how to capture the parameters I pass, and then how to change the src of the IFRAME. A simple example will likely suffice, but I can provide more detail if needed.

Thanks,

MikeB
mboysenAsked:
Who is Participating?
 
arantiusConnect With a Mentor Commented:
var qs = location.search.substring(1).split("&");
var Querystring = new Array()
for(i=0;i<qs.length;i++) {
    t = qs[i].split("=")
    if(t[0] && t[1]) Querystring[t[0]] = unescape(t[1]);
}

This code (javascript) should create an array called Querystring based off of the querystring in the URL.  This is the stuff after the file: ?name=value&othername=othervalue .

Place the appropriate name/value pairs into the URL.  THen after running that javascript, use something like this:

document.getElementById("theIframe").src="http://"+Querystring["domain"]+"/"+Querystring["page"];
0
 
RoonaanCommented:
<script type="text/javascript">
function iframe_goto(new_url)
{
  document.getElementById('myiframe').src=new_url;
}

function somefunction(value1, value2)
{
 iframe_goto('http://www.myscript.com/somepage.html?value1=' + value1 + '&value2=' + value2);
}
</script>
<iframe id="myiframe" src=""></iframe>

<button onclick="somefunction(1,2)">Click me</button>

0
 
mboysenAuthor Commented:
This is exactly what I was looking for.

MikeB
0
 
mboysenAuthor Commented:
OK. Here's the final solution. Thanks for the help

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body onLoad="updateFrame()" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<script type="text/javascript">
      var qs = location.search.substring(1).split("&");
      var QueryString = new Array()
      for(i=0;i<qs.length;i++) {
            t=qs[i].split("=")
            if(t[0] && t[1]) QueryString[t[0]] = unescape(t[1]);
            }
      var qURL = "http://www.orderhomeplans.com/widgets/planstyle.asp?hspos=E42NET&style="+QueryString["style"];
      
      function updateFrame()
      {
            frameID = "isearch1";
            //document.all[frameID].src = qURL;
            document.getElementById(frameID).src=qURL;
      }
            
</script>


<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="725" height="100%">
      <!-- MSTableType="layout" -->
      <tr>
            <td valign="top" colspan="2" height="90">
            <!-- MSCellType="DecArea" -->
            <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
      <!-- MSCellFormattingTableID="1" -->
      <tr>
            <td bgcolor="#000000" nowrap height="20">
            <!-- MSCellFormattingType="header" -->
            &nbsp;</td>
      </tr>
      <tr>
            <td valign="top" bgcolor="#00FFFF" height="100%" width="100%">
            <!-- MSCellFormattingType="content" -->
            Test</td>
      </tr>
            </table>
      </td>
      </tr>
      <tr>
            <td valign="top" width="132" height="571">
            <!-- MSCellType="NavBody" -->
            <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
      <!-- MSCellFormattingTableID="2" -->
      <tr>
            <td valign="top" bgcolor="#FF0000" height="100%">
            <!-- MSCellFormattingType="content" -->
            Test</td>
      </tr>
      <tr>
            <td nowrap bgcolor="#000000" height="20" width="100%">
            <!-- MSCellFormattingType="footer" -->
            &nbsp;</td>
      </tr>
            </table>
            </td>
            <td valign="top" height="571" width="694">
            <!-- MSCellType="ContentBody" -->                  

      
            <iframe name="isearch" id="isearch1" src="" marginwidth="1" marginheight="1" height="100%" width="100%">
            Your browser does not support inline frames or is currently configured not to display inline frames.
            </iframe>            
      

      
</td>
      </tr>
</table>

</div>

</body>

</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.