CODEWITHSUNDEEP
javascripthtmlurliframedynamic
Dum Potato
Dum Potato

Reputation: 965

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

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!

Upvotes: 4

Views: 6447

Answers (1)

Tarun Lalwani
Tarun Lalwani

Reputation: 146520

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/

Upvotes: 12

Related Questions