Pass URL QueryString to IFrame source

Dev Shed Forums Sponsor:

January 10th, 2013, 06:37 PM

Lenny123

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 30 m 46 sec
Reputation Power: 0

Pass URL QueryString to IFrame source

Hi,

I'd like to know if anyone has an idea on how to pass a Query String from the parent page URL to the 'src' of an iframe that is within it?

This is the idea: site A= website.com, site B= othersite.com. Site A has an iframe within it that loads site B. However, site B has a page such as .../index.asp?id=123. The point would be to allow a parent url link such as website.com/index.html?id=123 to load othersite.com/index.asp?id=123 in the iframe within the parent frame.

I was looking for a client-side setup. I tried

Code:

<iframe src="othersite.com/index.asp?id=""'+request.querystring("id")+'">

as well as

Code:

var id=request.querystring("id")
<iframe src="othersite.com/index.asp?id='<%=id%>'">

and several variations of that, but it did not work.

Might it be related to 'cross site scripting'?

A solution can be JSON/jQuery/AJAX or something else (Client Side, though). It doesn't have to use an iframe.

If answering, please post an example script.

Thanks.

January 10th, 2013, 10:11 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

You need to target the iframe; like so:

Code:

<iframe name="search" src="http://www.lycos.com"></iframe>

<a href="http://search.lycos.com/web?q=DevShed" target="search">Search For DevShed On Lycos</a>

Or...

Code:

<iframe id="search" src="http://www.lycos.com"></iframe>

<a href="http://search.lycos.com/web?q=DevShed" target="search">Search For DevShed On Lycos</a>

January 14th, 2013, 06:28 PM

Lenny123

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 30 m 46 sec
Reputation Power: 0

Thank you for replying. However, the point would be to allow a link from another page/site to load a variable iframe on the new page.

As such: a link on page a.html would open page b.html which has an iframe within it. The idea would be for the link to specify the url for the iframe to load on the linked page (b.html).

For example, website.com/a.html would have a link 'website.com/b.html?id=123' which would open website.com/b.html. .../b.html would contain an iframe with a variable source and the link from a.html would specify what the variable should be... Such as website.com/b.html?id=123 would open b.html with an iframe containing otherwebsite.com/index.asp?id=123.

In fact it doesn't have to use an iframe. The point would be to load otherwebsite.com with a variable query string within website.com/b.html.

Thanks.

January 14th, 2013, 08:55 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

I think you mean something like: a link on a page (under your domain); that sends a query string to an iframe (with a page in it, from another domain); that resides in... another page (under your domain); is that correct?

If so... you can do something like this:

Webpage_A.html

Code:

<a href="Webpage_B.html?iFrameQuery=DevShed">DevShed</a>

Webpage_B.html

Code:

<iframe id="myIframe" src="http://search.lycos.com/web"></iframe>
<script>
(function() {
var frameBaseSRC = document.getElementById("myIframe").src;
var frameQueryString = document.location.href.split("iFrameQuery=")[1];
 if (frameQueryString != undefined) {
  document.getElementById("myIframe").src = frameBaseSRC + "?q=" + frameQueryString;
 }
})();
</script>

January 15th, 2013, 06:05 PM

Lenny123

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 30 m 46 sec
Reputation Power: 0

Thanks. I tried it but it doesn't seem to work. It loads an error page as though the variable in the query string was not passed along. For example, linking website.com/index.html?id=123 which would load another page on the same site, with an iframe within that would load otherwebsite.com/index.asp?id=123. It seems to leave out the query string and just load otherwebsite.com/index.asp...

January 15th, 2013, 08:46 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

The example that I provided; does work. I even tested it locally and if it wasn't going to work; XSS brower security messures would have prevented it, but it did not. Post the code you have; so I can make sure you set-up the variables, that I provided you.

You need to make sure it's set-up like so (based on the query string variables; that you provided):

Code:

<a href="http://www.website.com/index.html?id=123 ">Visit Otherwebsite</a>

Code:

<iframe id="myIframe" src="http://www.otherwebsite.com/index.asp"></iframe>
<script>
(function() {
var frameBaseSRC = document.getElementById("myIframe").src;
var frameQueryString = document.location.href.split("id=")[1];
 if (frameQueryString != undefined) {
  document.getElementById("myIframe").src = frameBaseSRC + "?id=" + frameQueryString;
 }
})();
</script>

Last edited by web_loone08 : January 16th, 2013 at 04:37 PM.

January 16th, 2013, 05:19 PM

Lenny123

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 30 m 46 sec
Reputation Power: 0

Now it works! I was putting the script above the iframe (not in the 'body') and it wasn't working. Now it is below it and it works.

Thanks!

January 16th, 2013, 06:17 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Yeah, I used anonymous function; it is a hierarchical based function. If the element is below the function, the function is triggered long before the browser even conceives, that the html element (the function is accessing... in this example... it's an iframe) has been created, within the document. Because it is a "hierarchical based" function; if the html element is above the function; the document will perceive that the element has been created and then the function will be triggered and the function will access the element; as it is supposed to. You could put this function in the head of the document; in a defined function, but you will have to wait until a document event occurs to trigger the function.

In layman's terms; yes, the function has to be below the iframe, for it to work.

Pass URL QueryString to IFrame source

Developer Shed Advertisers and Affiliates