javascript - 在没有服务器端编码的情况下将动态 URL 字段传递到 iframe

Question

在下面需要一些帮助，不幸的是，我无法自己弄清楚:(

1. 用户被重定向到一个包含动态 URL 的表单(通过 iframe 提供):website.com/form?id=123

2. 提供页面的代码从页面 URL 中的“id”参数读取该值(“123”)。

3. 脚本然后将该值写入“data-url”属性中 URL 的末尾，如下面的示例代码片段所示。

<div class="typeform-widget" data-url="iframe.com/to/abc123?id=123" style="width: 100%; height: 500px;" ></div> 
<script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.iframe.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() 
</script>

不幸的是，我似乎无法让它工作...

非常感谢!

Answer 1

不确定为什么您在执行此任务时会遇到问题。下面是我如何从当前 URL 获取 ID

url = document.location.href;
var paramId = new URL(url).searchParams.get("id");

var frameElement = document.getElementById("typef_orm_frame");
frameElement.src = "https://example.com/to/abc" + paramId + "?id=" +paramId;

这是演示的 JSFiddle

https://jsfiddle.net/0Lswuxj8/1/