Pass a dynamic URL field into an iframe without server side coding

Question

need some help on the below, as, unfortunately, I am unable to figure it out by myself :(

1. User gets redirected to a form (served via an iframe) which includes a dynamic URL: website.com/form?id=123

2. The code which serves up the page reads that value ("123") from the “id” parameter in the page’s URL.

3. The script then writes that value on the end of the URL in the “data-url” attribute, like in the example code snippet below.

<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>

Unfortunately, I cannot seem to get it to work...

Thanks much!

Answer 1

Not sure why you are facing issue with this task. Below is how I would get the ID from the current URL

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;

Here is the JSFiddle for the demo

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