Dynamic Iframe | Wix Code Extracts

In this tutorial

You will learn how to utilize an Iframe to its full potential
You will learn how to connect an Iframe to a database
You will learn how to use onMessage

Step 1. Add the elements

In this tutorial we only need an Iframe on our dynamic page. Give it the ID 'dynamicIframe'.

Step 2. Setup the database

In this tutorial, our database consists of the default 'title' field and a text field called 'html'.

Step 3. Write the Iframe code

<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("dynamicElement").innerHTML = event.data;
}
};
function load () {
window.parent.postMessage("page loaded");
}
</script>
</head>
<body onload="load ();" style="background-color:#ffffff;">
<div id="dynamicElement"></div>
</body>

Step 4. Write the page code

The page code is pretty simple. It just gets the data from the dataset and passes it to the Iframe.

$w.onReady( () => {
   $w('#dynamicDataset').onReady( () => {
   let html = $w('#dynamicDataset').getCurrentItem().html;
       $w('#dynamicIframe').onMessage( (event) => {
           $w('#dynamicIframe').postMessage(html);
       });
   });
});

Once you've got this setup, add some items to your collection, sync, and publish.