Connecting HTML iFrame to database

Hey all! I’m currently creating a dynamic page for my podcast episodes. Everything works as expected but now I’m stuck on how to handle the HTML iFrame. Prior to dynamic pages, I duplicated and manually updated each page and thus, was able to add the HTML code (embedded Libsyn web player) for each episode into the iFrame.

Is there a way to do this - either automatically via the database, or manually update - on dynamic pages?

Thanks!

1 Like

Hi,
You can simply use the postMessage method to post information to an HTML iFrame. You can also check out the Messaging section of this article. This code should be added to the dynamic page code section.

I hope it’s clear.

Good luck,
Tal.

Hi Tal,
I just want to ask you to please kindly show me a little example on how to do this. It sounds quite simple how you explained it but sadly its not working for me. attached some screenshots of my page code. thanks in advance ma’am

do you have a “HTML” object called “html4”? also you probably can’t test it in Preview, have to publish it for it to work.

Try adding a button for an onClick event to happen so that the code is sent to the iframe, plus you also need the iframe to have code in it too that receives the message by using onMessage too.

 export function messageSendButton_onClick() {
  // send message to the HTML element
   $w("#myHtmlElement").postMessage($w("#textInput1").value);
 } 

Also, check out the HTML API reference too for a lot more info and code examples about it too.
https://www.wix.com/corvid/reference/$w.HtmlComponent.html