Dynamically Update iframe content with code from database

I would like to update the content in an iframe dynamically with the page based on the record being displayed at the time. I’m not great at Javascript so I was wondering if anyone has some code that could be used. (I googled and couldn’t find something I could tweak)

My unique index is Title and the field I want to use is embed_code, I could also use the URL as an index if needed. Any help would be super great!!!

Hi,
Can you share a code template of the content you want to update?
Roi.

Hey Roi, I’m not completely sure what you are asking, but the iframe code is the following:

The above code is stored in the database in a field, I just need it to update with the dynamic URL.

In the HTML component, leave an empty div and a container.
And when evert.data use:

document.querySelector('div').innerHTML = `<iframe src="${event.data.url}" width="100%" height="500" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>`

Feel free to paste here your progress.
Roi.

1 Like

Might I follow up with this? I am attempting something similar. Very similar. My HTML coding skills are almost nil. Could you elaborate on the steps that will allow this to happen? I have a field in my database populated with the iframe code. I have the iframe/html component on a dynamic page. How can I make this work? ELI5, please.

I have been back and forth through the tutorials and forum. Over and over I hear it is impossible and yet you have devised a way. I really need this to work, if possible and you have the time/inclination to do so.

If you would be able to type out an example of what would go in the JavaScript area and the HTML component… that would be very helpful.

My sincere thanks.

I can not guess what to do. Is this actually possible to do? To use an iframe linked to a field in the database in a dynamic page in WIX?

I was able to get this to work, but it only works if you are using a URL field from your dataset, it can’t be in the iframe format.

I created dynamic pages from a dataset “dynamicDataset” and added an iframe object called “html1”. I was then able to dynamically update the object based on the field from the dataset “embed_url”.

See the code below:

$w.onReady( () => {
$w(“#dynamicDataset”).onReady( () => {
let itemObj = $w(“#dynamicDataset”).getCurrentItem();
console.log(itemObj.embed_url);
$w(‘#html1’).src = itemObj.embed_url;

} );

} );

Thank you Hard Fork Studios! Not working yet but might be missing one bit:

In the iframe, do I just leave an empty div and a container as Roi Bendet suggested before? For this I am writing the following but what could I be missing?:

(It is an iframe, isn’t? Not an Embeded Website element)

I ended up scrapping the iframe idea so I used an iframe element and left it with no src and used the web address (the site I embedded had something that was already formatted).

So the embed_url listed above I just used an actual web address. From everything I researched I couldn’t find any way to actually make the iframe element work with the standard iframe tags.

How do you create the iframe or html element that works with this if not from the +Add->Anchors and more->Embed menu?

can you share complete example code please?

< a href =" https://ecostals.com/contact-us/ “> Packers and Movers Contact < /a >
< a href =” https://ecostals.com/disclaimer/ “> Packers and Movers disclaimer < /a >
< a href =” https://ecostals.com / “> Ecostal removals < /a >
< a href =” https://ecostals.com/fine-art-packing-and-shipping/ “> Fine art movers < /a >
< a href =” https://ecostals.com/fine-art-packing-and-shipping-in-bandra/ "> Fine art movers in Bandra < /a >