Passing url parameters to iframe

oosamaa

how to pass pass browser url parameters to iframe url or to url inside an iframe ???
(this iframe is in unbounce html block

10 replies

E

Hi did you ever find a solution for this? I have the same issue

oosamaa

yes Evan , use this javascript in the header.

            var url    = "the URL inside the iframe";

            var params = "?"+window.location.search.substr(1);


            var iframe_url = url+params;


            document.getElementById("iframe").src = iframe_url;

        </script>

and the HTML use this below:

<iframe id="iframe" height=100% width=100% frameborder="0" scrolling="no" src=""></iframe>

E

Thanks! Appreciate it

G

Hey,

Thanks for the feedback on this. I used it but I’m struggeling on how to use it.

I’m in the same situation :

  • main page with a parameter (mainpagecom/?wt=test)
  • the iframe url needs to use the string “test” to build its own url.

With your code I only manage to reach the following result:
iframe.com/?wt=test

How is it possible to remove the “?wt=” and only keep “test”, in order to reach the result iframe.com/test ?

Thanks for your help 🙂

J

Hi,

I am finding trouble using this. There are a few things I am doing that might make this complicated.

  1. I am creating a form in unbounce
  2. Embedding the form into another web program
  3. Embedding that webpage back into a new Unbounce page and sending out that page as the link with UTMS (http://visit.coop/32q75v) That is the UTM link with all the data that I want back to transfer into my form.
    Here is the script I am using:

I put the script into this page (http://visit.coop/32q75v) also the 3rd party webpage builder where i put the form in.

Can you please advise how I would get the UTM info back into the form?

Hristian
Userlevel 7
Badge +3

Hey @joypak,

To be honest, I have no idea what exactly you are trying to do and why you are making it so complicated but anyway… to answer your question:

You need to scripts… one to capture the UTM parameters from the page and pass it to the iFrame. The 2nd script would go with the iFrame and would “receive” the incoming parameters.

This should point you in the right direction but I strongly advise on rethinking the whole process.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
J

HI Hristian,

The process we are using is not ideal, but because there are some limitations in both programs we have to do it this way. Do you know what those 2 scripts would be?

Hristian
Userlevel 7
Badge +3

Hi @joypak,

The scripts involved would have to be custom coded for your particular use case.

Also keep in mind that with the current set up you’ve described, the scripts might break from the smallest of changes.

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
J

I am not too familiar with script do you know the particular script that would be added in?

Eriksyon

Hi @oosamaa ,
I used your script and it worked fine but what if I won’t use “?” and just add any string after the URL but the string would start with a “#”? I tried to play around with your script but I’m having problems getting the result I wanted.

Here is the javascript I updated

>     <script>
>                     function newiframeSrc() {
>                         var url    = 'http://www.myiframe.com/filter.html';
>                         var params = window.location.search;
>                         var iframe_url = url+params;
>                         document.getElementById('iframe').src = iframe_url;
>                     }
>      </script>
>
> <!-- This is the HTML -->
>  <body onload="newiframeSrc()">
>             <iframe id="iframe" src=" " style="width:100%;height:800px;"></iframe>
>  </body>

then the string I wanted to add the parent URL looks like this #!?filter=15 (it always start with a # sign) . So the result of the iFrame source should be http://www.myiframe.com/filter.html#!?filter=15

Not sure what else to do but in this case it is the “#” sign that is making problems.

I hope you can help, thanks in advance 🙂

Reply


Terms & ConditionsCookie settings