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

User gets redirected to a form (served via an iframe) which includes a dynamic URL: website.com/form?id=123
The code which serves up the page reads that value ("123") from the “id” parameter in the page’s URL.
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!

Is this code executing inside the frame? Is it trying to read the current browser url or iframe url? — Tarun Lalwani
– Tarun Lalwani, Commented Nov 4, 2017 at 4:54
The code is on the site (not the iframe), but aims at changing the iframe url by reading the id tag in the current browser url — Dum Potato
– Dum Potato, Commented Nov 4, 2017 at 17:32
So if I understand it right, user goes to "website.com/form?id=123" using a browser, that page needs to add a IFRAME with url as iframe.com/to/abc123?id=123? do you have a sample nonworking live page also? — Tarun Lalwani
– Tarun Lalwani, Commented Nov 4, 2017 at 17:35

Tarun Lalwani · Accepted Answer · 2017-11-04 18:41:43Z

12

+50

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/

answered Nov 4, 2017 at 18:41

Tarun Lalwani

147k11 gold badges217 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related