How do I capture a url parameter from parent page and send to an iframe using Javascript?

Question

I have an iframed form placed on a landing page. When users come to this landing page from an affiliate link, a parameter is placed in the url (http:thelandingpage.com?c3=1). When they submit the iframe form, I need to send that variable (c3=1) to the next page. How could I achieve that?

Here is the option I'm exploring:
Pulling the parameter from the parent page url
Note: this code is being placed inside the iframe
(Javascript)

<script language="JavaScript">
  function processUser()
  {
    var parameters = window.parent.location.search.substring(1).split("&");

    var temp = parameters[0].split("=");
    c3 = unescape(temp[1]);

    //Assign "c3=" to a var
    var c3variable = c3;

    //Append c3 Variable
    document.getElementById("c3").innerHTML = c3variable; 

  }
processUser();


</script>

(HTML)

<strong>If variable displays, that's a success!</strong>
<br>
c3: <span id="c3"></span><br>

Of course it's not working properly though. It displays the first parameter in the iFrame's "src", not the first parameter of the parent page.

I can't move on until I grab the "c3=1" parameter.. But my next step would be to stick that variable in a hidden field or something in order to send it to the next page as a query string.

Please help!

If you can actually control the `iFrame` meaning, it is an `iFrame` on your domain, then you should be able to porgramatically submit the form and then redirect the page. But if the iframe source is not on the domain `thelandingpage.com` you would not be able to do that. — Adjit, Dec 19 '16 at 18:01
@Jonasw .. Can you elaborate on how `window.postMessage` would work for me? — Mr. Qwality, Dec 19 '16 at 18:34

score 0 · Answer 1 · edited May 23 '17 at 10:29

Solution 1: pass parameter directly to the iframe element.

Parents code:

window.onload=function(){
    iframe=document.createElement("iframe");
    iframe.src="iframe.php?"+window.location.href.split"?")[1];
    document.body.appendChild(iframe);
}

Solution 2: lookup the parent for url query:

Iframe:

window.postMessage("url?","parentsurl");
window.addEventListener("message",function(e){
    if(e.data.url){
        Parentsurl=e.data.url;
    }
});

Parent:

window.addEventListener("message", function(e) {
    if(e.data="url?"){
        window.postMessage({url:window.location.href});
    }
});

See: Access parent URL from iframe

How do I capture a url parameter from parent page and send to an iframe using Javascript?

1 Answers1