Pass query parameters to embeded iframe with javascript

Question

I do not know much Javascript and I am trying to pass query string parameters to an embedded iframe.

Here is the url I am trying to retrieve query parameters from:

https://usslc.clickfunnels.com/optin1612360116340?contactId=924408&inf_contact_key=ea845fcb8c29d976c0755e8b56134056cc0558ed5d4c28cbfab114022b1ec50d&inf_field_BrowserLanguage=en-US%2Cen%3Bq%3D0.9&inf_field_FirstName=PG2&inf_field_Email=preston%2Btest2%40behavioralmedia.com&inf_field_Phone1=5554445555

Here is the code I need for the iframe:

    <iframe src="https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>

This is what I have been working on and not getting any luck with:

        <iframe id="myIframe" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>
    <script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript">
    let myIframe = document.getElementById("myIframe");
                let src = "https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186"
                let url = window.location.href;
                let name = url.searchParams.get("inf_field_FirstName");
                let email = url.searchParams.get("inf_field_Email")
                let phone = url.searchParams.get("inf_field_Phone1")
                let adsURL = src+"&firstName="+name+"&email="+email+"&phone="+phone;
                myIframe.src = adsURL;
    </script>

Again, I am a total noob with stuff like this so sorry if this is real bush league.

What is the best way to have the name, phone, and email prepopulate in the iframe?

Thanks!

I think you can't do that because of security issues. you can interact with an iframe if its src is in the same domain as your main file wich is not the case — Pluda
– Pluda, Commented Feb 4, 2021 at 16:16

Tom King · Accepted Answer · 2021-02-04 16:24:14Z

Accessing an iframe that already exists on the page can be tough, if not impossible. If you only need to have the desired fields w/ the iframe on page load then you could instead generate the iframe in the script tag and append it to the document like so:

    <div id="frameWrapper"></div>
<script>
  const url = window.location.href;
  const frameWrapper = document.getElementById('frameWrapper');
  const BASE_URL = 'https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186';
  const frameElem = document.createElement("iframe");
        frameElem.src = `${BASE_URL}` +
                        `&name=${url.searchParams.get("inf_field_FirstName")}` +
                        `&email=${url.searchParams.get("inf_field_Email")}` +
                        `&phone=${url.searchParams.get("inf_field_Phone1")}`;
        frameElem.name = url.searchParams.get("inf_field_FirstName");
        frameElem.title = "Schedule Appointment"
        frameElem.style.height = "100%";
        frameElem.style.width = "100%";

  frameContainer.appendChild(frameElem);
</script>

In this case we are just replacing the iframe with a wrapper DIV, assembling the iframe in our script tag and appending it to the wrapper.

Collectives™ on Stack Overflow

Pass query parameters to embeded iframe with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related