用javascript传递查询参数给嵌入的iframe

Question

我不知道多少Javascript，我正试图将查询字符串参数传递给嵌入式iframe。

这是url我试图检索查询参数:

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

下面是我需要的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>

这是我一直在做的，但没有任何运气:

<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>

再说一遍，我对这种东西完全是新手，所以如果这是真正的丛林联赛，我很抱歉。

在iframe中预先填充姓名、电话和电子邮件的最佳方法是什么?

谢谢!

Answer 1

访问页面上已经存在的iframe可能很难，如果不是不可能的话。如果您只需要在页面加载时使用所需的字段w/iframe，那么您可以在script标记中生成iframe，并将其附加到文档中，如下所示:

<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>

在这种情况下，我们只是用包装器DIV替换iframe，将iframe组装在我们的脚本标签中，并将其附加到包装器中。