使用 Javascript 将传入的 URL 参数传递给 iframe src答案

【问题标题】：Pass Incoming URL Parameters to iframe src with Javascript使用 Javascript 将传入的 URL 参数传递给 iframe src
【发布时间】：2023-03-24 12:16:02
【问题描述】：

我的登录页面上有一个 Webflow 表单，用于收集姓名、电子邮件和电话号码。该表单重定向到我网站上包含全屏 TypeForm 嵌入的另一个页面。

我正在尝试使用 GET 方法将姓名、电子邮件和电话传递给 Typeform 隐藏字段。

我真的不适合这里...我不知道我在做什么。我已经阅读了许多 Stackoverflow 线程和博客文章。

我接近了吗？这是我嵌入的 HTML 中的代码。

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

<title>LBWR Qualification Form</title> 

<style type="text/css"> 

html{ margin: 0; height: 100%; overflow: hidden; } 
iframe{ position: absolute; left:0; right:0; bottom:0; top:0; border:0; } 

</style> 

</head> 

<body> 

<script type="text/javascript">

var loc = window.location.toString(),
    params = loc.split('?')[1],
    iframe = document.getElementById('typeform-full');

iframe.src = iframe.src + '?' + params;

</script>

<iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://zacharypinnell.typeform.com/to/k5BPk6">

</iframe> 

<script type="text/javascript" src="https://embed.typeform.com/embed.js">

</script> 

</body> 

</html>

我意识到使用 GET 可能不合规——它可能无法保证我的潜在客户信息的安全。如果您觉得好心，请随时将我重定向到其他更安全的路线。

非常感谢您。

编辑：已解决。

【问题讨论】：

标签： javascript html post get parameter-passing

【解决方案1】：

这看起来像一个类似的问题here。

您可以使用Typeform Embed SDK 来更好地控制您的嵌入。

并使用javascript从当前页面检索查询参数

let params = new URLSearchParams(location.search);

然后将这些参数传递给 typeform。

var url = "https://YOUR_SUBDOMAIN.typeform.com/to/YOUR_TYPEFORM_ID"
url += `?name=${params.get('name')}&email=${params.get('email')`;

但是为什么不将 typeform 也用于第一种形式呢？

【讨论】：