'Passing parameters from website URL to iframe URL

I try to take the parameters from website URL and passing to iframe URL.The website URL it looks like this: 

www.example.com/en/open-account/Redirect?linkID=demo1064&referral_id=0010962

The above URL has 2 parameters (linkID and referral_id).Maybe have more parameters (2-8 parameters). The iframe URL it looks like : 

<iframe frameborder="0" scrolling="no" class="frameboxlive" src="https://login.example.com/demo_signupiframe=1&linkID=demo1064=&referral_id=0010962=&ref= www.example.com/en/open-account/Redirect?linkID=demo1064&referral_id=0010962&clang=en" width="700" height="800" align="center"></iframe>

The iframe URL it must be generated automatically and have these sections:

  1. The main URL: https://login.example.com/demo_signupiframe=1
  2. The parameters that come from the Website URL
  3. The parameter ref that include the website URL
  4. Finally, the parameter clang that includes the language. The language is in the website URL but not as a parameter.

Any suggestions to do this with Javascript? Thanks in advance.

javascripthtmlurliframe


Solution 1:[1]

Try this:

<iframe frameborder="0" scrolling="no" class="frameboxlive" src=""></iframe>

<script>
    var mainUrl = "https://login.example.com/demo_signupiframe=1";
    var urlParams = new URLSearchParams(window.location.search);
    urlParams = urlParams.toString();
    var ref = document.URL;
    var clang = 'clang=' + document.location.pathname.split('/')[1];

    var iframeUrl = mainUrl + '&' + urlParams + '&' + urlParams + '&' + ref + '&' + clang;

    document.getElementsByTagName("iframe")[0].src = iframeUrl ;

</script>

Solution 2:[2]

You can use the below snippet to get all the query string from the url , the manipulate and pass it to the iframe URL.

if you wanna statically retrieve the objects using something like this

var linkID = getUrlVars()["linkID"]; var referral_id= getUrlVars()["referral_id"];

function getUrlVars() {
  var vars = [], hash;
  var query_string = window.location.search;
   if (query_string) {
        var hashes = query_string.slice(1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }

        return vars;
    } else {
        return false;
    }
}

Note : Encode the URL components before retrieval.

Solution 3:[3]

I had a similar issue and needed to extract just the query string vars from a URL....

Parent:

example.com?&booking=completed&bookingnumber=12345 etc...

in iframe:

myapp.com << missing parameters...

@Faly's answer helped me, but I simplified it... It still cross-domain and works in all browsers as at Nov 2020

In the parent page example.com where you want to embed the iframe:

  <iframe frameborder="0" class="frameboxlive" src="" height="800"></iframe>

  <script>
  var mainUrl = "myapp.com"; // the-page-that-you-want-to-embed
  var urlParams = new URLSearchParams(window.location.search);
  urlParams = urlParams.toString();
  var ref = document.URL;
  var clang = 'clang=' + document.location.pathname.split('/')[1];
  var iframeUrl = mainUrl + '?&' + urlParams;
  document.getElementsByTagName("iframe")[0].src = iframeUrl ;
 </script>

That's it. 'mainUrl' then gets populated with your querystring from the parent URL:

myapp.com?&booking=completed&bookingnumber=12345

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Faly
Solution 2 redhatvicky
Solution 3 SolaceBeforeDawn

Related Questions