Solved

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

Posted on 2004-09-30
4
607 Views
Last Modified: 2010-04-06
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
0
Comment
Question by:mboysen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 12193012
<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
 
LVL 18

Accepted Solution

by:
arantius earned 100 total points
ID: 12193039
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
 

Author Comment

by:mboysen
ID: 12193468
This is exactly what I was looking for.

MikeB
0
 

Author Comment

by:mboysen
ID: 12194060
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Xsl Nested Loop 4 32
HTML Video won't Autoplay on site 6 39
What is the normal amount of queries 5 84
how to extract window origin in spring 2 78
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question