使用 Javascript 将传入的 URL 参数传递给 iframe src
Posted
技术标签:
【中文标题】使用 Javascript 将传入的 URL 参数传递给 iframe src【英文标题】：Pass Incoming URL Parameters to iframe src with Javascript 【发布时间】：2019-07-30 01:32:40 【问题描述】：我的登录页面上有一个 Webflow 表单，用于收集姓名、电子邮件和电话号码。该表单重定向到我网站上包含全屏 TypeForm 嵌入的另一个页面。
我正在尝试使用 GET 方法将姓名、电子邮件和电话传递给 Typeform 隐藏字段。
我真的不适合这里...我不知道我在做什么。我已经阅读了许多 *** 线程和博客文章。
我接近了吗？这是我嵌入的 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" 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 可能不合规——它可能无法保证我的潜在客户信息的安全。如果您觉得好心，请随时将我重定向到其他更安全的路线。
非常感谢您。
编辑：已解决。
【问题讨论】：
【参考方案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 也用于第一种形式呢？
【讨论】：
以上是关于使用 Javascript 将传入的 URL 参数传递给 iframe src的主要内容，如果未能解决你的问题，请参考以下文章
javascript 使用javascript将查询参数添加到URL
如何使用 JavaScript 将包含多个数组的数组作为参数化 URL 传递