捕获url参数并传递给div

Question

如何将参数从页面的url传递到div?我想从网站url的源代码附加到下面的潜水内的数据url。我将使用"friends"这个例子。

例如:mysite.com?formSource=friends

div应该像这样:

<div class="typeform-widget" data-url="https://form.typeform.com/to/123abc?typeform-medium=embed-snippet#source=friends" style="width: 100%; height: 500px;"></div>

我尝试了一些JS看起来像这样:

<script>
const urlParams = new URLSearchParams(window.location.search);
const formSource = urlParams.get("formSource");
</script>

然而，我不确定如何在div中的散列标签之后更新参数。对此非常新，但在询问之前确实做了一点谷歌搜索:)

Answer 1

如果你想把参数从你的页面URL转移到一个嵌入的typeform，你可以使用新的typeform嵌入库和它的transitiveSearchParams选项。

你嵌入的代码看起来像这样，库会处理剩下的部分:

<div data-tf-widget="<form-id>" data-tf-transitive-search-params="formSource"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Answer 2

你可以使用JS通过它的类来选择div元素，然后更新data属性:

const formSource = 'friends';
const element = document.querySelector('.typeform-widget');
element.dataset.url = `https://form.typeform.com/to/123abc?typeform-medium=embed-snippet#source=${formSource}`;

<div class="typeform-widget" data-url="https://form.typeform.com/to/123abc?typeform-medium=embed-snippet#source=friends" style="width: 100%; height: 500px;"></div>

注意，我在这个例子中使用了formSource的const，但它可以用你的url参数检索代码代替。