如何通过隐藏字段捕获嵌入Typeform的当前页面URL？

方案1：原生JavaScript实现（无第三方依赖） #

无需引入额外库，直接修改嵌入代码即可，代码示例如下：

<!-- Typeform容器 -->
<div data-tf-widget="a1B2c3D4" data-tf-opacity="0" data-tf-hide-headers data-tf-hide-footer data-tf-hidden="" style="width:100%;height:350px;"></div>
<script>
// 编码当前页面URL，避免特殊字符导致传值异常
const currentArticleUrl = encodeURIComponent(window.location.href);
// 选中Typeform容器元素
const tfWidget = document.querySelector('[data-tf-widget="a1B2c3D4"]');
// 给隐藏字段赋值
tfWidget.dataset.tfHidden = `article_url=${currentArticleUrl}`;
</script>
<!-- 加载Typeform嵌入脚本，必须放在赋值逻辑之后 -->
<script src="//embed.typeform.com/next/embed.js"></script>

方案2：jQuery实现（适合已引入jQuery的项目） #

如果你的项目已经在使用jQuery，可以用以下代码实现：

<!-- Typeform容器 -->
<div data-tf-widget="a1B2c3D4" data-tf-opacity="0" data-tf-hide-headers data-tf-hide-footer data-tf-hidden="" style="width:100%;height:350px;"></div>
<script>
const currentArticleUrl = encodeURIComponent(window.location.href);
$('[data-tf-widget="a1B2c3D4"]').attr('data-tf-hidden', `article_url=${currentArticleUrl}`);
</script>
<!-- 加载Typeform嵌入脚本，必须放在赋值逻辑之后 -->
<script src="//embed.typeform.com/next/embed.js"></script>

注意事项 #

• 必须保证隐藏字段的赋值操作在embed.js加载之前完成，否则Typeform初始化时读不到对应的参数值，传值会失效
• 不要删除encodeURIComponent逻辑，URL中常携带的参数、特殊符号如果不转义会导致传值截断或者异常
• 如果是单页应用（SPA），路由切换不会刷新整页，需要在路由切换完成后重新执行赋值逻辑，再初始化Typeform组件

内容的提问来源于stack exchange，提问作者Tas K