Update an iframe/widget dynamically

Ask the community
,
9

@giri-zano @russian-dima this is how I would approach it. Either you received the Id, then you pass it to exec(). If you don’t, you get it from Wix via a postMessage request. So this wouldn’t fly?

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>Title</title>

 <meta name="description" content="">
 <meta name="viewport" content="width=device-width,initial-scale=1">

</head>
<body onload="init()">

 <script type="text/javascript">
 // Wix/iFrame messaging
 window.addEventListener('message', async function(event) {
       console.log("Let's see if we received a message...");
       if (event.data){
             console.log("Message received from Wix!"); 
             console.log("event.origin: ", event.origin);
             console.log("event.data: ", event.data);
             var data = JSON.parse(event.data);
             console.log(data.venue_id);
             //pass the id
             exec(data.venue_id);
       }
 });
 </script>

</body>

<script type="text/javascript">
function init() {
      var id;
      //write a postMessage function to get the id from Wix
      var new_script = document.createElement('script');
      new_script.onload = function() {
            alert("Script loaded and ready");
      };
      new_script.src = "https://partners.designmynight.com/pf/js?venue_id="+id;
      document.getElementsByTagName('body')[0].appendChild(new_script);
}
</script>
<script type="text/javascript">

function exec(id) {
      var new_script = document.createElement('script');
      new_script.onload = function() {
            alert("Script loaded and ready");
      };
      new_script.src = "https://partners.designmynight.com/pf/js?venue_id="+id;
      document.getElementsByTagName('body')[0].appendChild(new_script);
}
</script>

</html>