CODEWITHSUNDEEP
javascriptiframegoogle-analyticsquery-stringwindow.location
jgrannis
jgrannis

Reputation: 321

Capture incoming URL Parameters, then pass to iFrame Src with Javascript

So trying to figure out how to do this with window.location in Javascript. I'm sending users to our site with an appended URL with a Google Analytics code that I need to pass to an iframe src on that page. I'd assume Javascript could do this (note - I cannot use PHP)...

This is what I want to do:

I'd send users to the page with all the campaign data in tact. For example a user would click on this link: http://www.xyz.com/index.html?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click

They would be directed to that page, that then has this iFrame on it. The code on the store side would need to pick up utm_source, utm_campaign, utm_medium and include these parts in the IFRAME SRC So this bit:

<iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis"></iframe>

now becomes:

 <iframe height="960px" frameborder="0" scrolling="no" width="958px" src="http://www.abc.com/minis?utm_source=Facebook&utm_campaign=Facebook+May&utm_medium=click"></iframe>

Any javascript suggestions would be greatly appreciated. Note - I cannot use PHP.

UPDATE: Got this to work!! Yay, but now I need to edit it a bit:

So say the appended url that was clciked was this: 

http://abc.com/index.html?apple&orange&peach

and I need the iframe src to be this

 http://xyz.com/minis?orange&peach

I moved a few things around in the script, but is now only grabbing orange and not the other & attribute (peach). please advise if there is a better way to work (without have all the params and then depending on what link comes in, some of the & will be undefined:

<body>

<script type="text/javascript">

$(function() {

var loc = window.location.toString(),
params = loc.split('&')[1],
params2 = loc.split('&')[2],
params3 = loc.split('&')[3],
params4 = loc.split('&')[4],
params5 = loc.split('&')[5],
params6 = loc.split('&')[6],
  iframe = document.getElementById('myIframe');
alert(iframe.src); 
iframe.src = iframe.src + '?' + params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5;
alert(iframe.src); 

});
</script>
<iframe id="myIframe" src="http://www.xyz.com/minis"></iframe>

</body>

Upvotes: 23

Views: 89515

Answers (2)

Oleksandr Knyga
Oleksandr Knyga

Reputation: 633

Just use window.location.search.

const iframe = document.getElementById('frame');
iframe.src = iframe.src + window.location.search;​​​​​​​​​​​​​​​​

Upvotes: 2

GillesC
GillesC

Reputation: 10874

This little snippet should do, here all you have to do is grab the bit after ? as a string and append it to the iframe source.

var loc = window.location.toString(),
    params = loc.split('?')[1],
    iframe = document.getElementById('myIframe');

iframe.src = iframe.src + '?' + params;​​​​​​​​​​​​​​​​

Upvotes: 21

Related Questions