Sending custom html script to an iframe on dynamicpage

Ask the community
,
1

I am using dynamic pages & a dynamic database as part of my WIX Editor website for loading wedding pages for clients to view their films and download from. As of my most recent wedding I have decided to use a new platform to host the completed highlight video on which I would like to show on their page on my website using an embedded iframe script from the host platform which will be unique per wedding couple.

Because the weddings prior to this are using a different system, I am trying to make some code that checks the date of the wedding and if it’s after a certain date, it will populate an iframe element with their custom html code to show their films. I already have it working so it can detect which wedding date it is etc, but I do not understand how to use html/iframes and specifically the postMessage/onMessage functions to be able to populate the iframe with the custom code.

I have tried using ChatGPT with limited success so far, it seems to not understand how wix works with the postMessage and onMessage functions.

This is what I have so far which detects the current item and retrieves their custom html code from the database. (checked using console logs and know it’s working correct)

$w.onReady(function () {
 $w('#dynamicDataset').onReady(() => {

    let currentItem = $w('#dynamicDataset').getCurrentItem(); 
    let weddingDate = currentItem.weddingDate; 
    const cutoffDate = new Date('04/08/2023');

    if (new Date(weddingDate) > cutoffDate) {
       let htmlContent = currentItem.vidflowHtml; 
     }
  });
});

So now what I need to do is get the htmlContent into an iframe element on the page… Help?

2

Chat-GPT is not the best choice if it comes to Wix-Coding!

Artificial-Inteligence is not equal to real BRAIN :grinning: :grinning: :grinning:

But regarding the point with postMessage() and onMessage(), Chat-GPT was correct.

All you have right now is just the ITEM-DATA you got from your DB (DATABASE) using a DATASET. Since it is a DYNAMIC PAGE → you get always just one ITEM–> current-Item (1-data-package).

Once you got this data-package, you will want to send it over to your HTML-Component (iFrame), to do what ever you want with this data inside the iFrame, and maybe also send a responding back to your wix page.

To be able to fullfill your wish you will need the following…
You will find all needed informations here…

3

Thanks for the reply,

I have been following that link as well as looking elsewhere online… I just don’t understand how to get the data over to the iframe and get the iframe to display this new script to embed the video.

I took the example code from the site you linked and this is working (in terms of, i can send a text string to the iframe and it will show, but thats as far as I can get. My knowledge runs out there

4

let htmlContent = currentItem.vidflowHtml;

OK!

  1. You got your HTML-CODE → let it look like a simple HTML-CODE…
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>This is a simple HTML page.</p>

</body>
</html>

Or whatever. Well, now i understand what you mean and see the tricky problem.
You are geting the HTML-CODE for your HTML-Component from databse and you want to load that code into your HTML-Comp. and at same time you want to communicate with your HTML-Component.

Did i understand it right ?

5

Never tried it this way, but probably there is a chance to get this to work.

NORMALY → you would put the HTML-CODE, which should open the communication between Wix-Page and iFrame, manualy into the HTML-Component, which you already have been placed onto your page → html1

But in your case, you are trying to push the code into your HTML-Component by code (not manually). I think this is not possible.

What could be a solution ?

  1. Generating a HTML-CODE for your HTML-Component, which would be able to CREATE a FURTHER iFrame inside of your HTML-Component and load the recieved data from your wix-page into that inner-layered-iFrame of your iFrame.

But this will get a little bit TRICKY and no guarantee that it will work.

This example would generate an iFrame inside your HTML-Component…(by a click onto a button)…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page with iFrame</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>This is a simple HTML page.</p>

    <!-- Button to trigger the iframe creation -->
    <button onclick="createIframe()">Create iFrame</button>

    <script>
        function createIframe() {
            // Create an iframe element
            var iframe = document.createElement('iframe');

            // Set attributes for the iframe
            iframe.src = 'https://www.example.com'; // Replace with your desired URL
            iframe.width = '600';
            iframe.height = '400';
            iframe.title = 'Example iFrame';

            // Append the iframe to the body or any other desired element
            document.body.appendChild(iframe);
        }
    </script>

Change it, and remove the button and make it creating the iFrame onLoad instead.

This was your first step.

STEP-2: Like mentioned in the VELO-API → generate the communication between your HTML-Component and your Wix-Page.

STEP-3: Once this step is done and you can send DATA over to your HTML-Component, —> you send the CODE for your iFrame over to your HTML-Component.

STEP-4: Your HTML-Component recieves that HTML-CODE and is able to generate out of it an INLAY-iFRAME inside your HTML-Component, reading the recieved HTM-CODE-DATA.

EXAMPLE, how the last step could look like…

iFrame Example 
<h1>Main Page</h1>

<!-- iFrame with embedded HTML content -->
<iframe width="600" height="400" title="Embedded HTML" 
        src="data:text/html;charset=utf-8,
            &lt;!DOCTYPE html&gt;
            &lt;html lang='en'&gt;
            &lt;head&gt;
                &lt;meta charset='UTF-8'&gt;
                &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;
                &lt;title&gt;Embedded HTML&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;h1&gt;Hello, World! (Embedded)&lt;/h1&gt;
                &lt;p&gt;This is embedded HTML content.&lt;/p&gt;
            &lt;/body&gt;
            &lt;/html&gt;">
</iframe>

Sorry this post was generated in 8-10min, so of course you will have to put much more effort on it → to get it to work.

I am just giving you the IDEA!