HTML Element in site code receiving "ready" message multiple times from iframe code?

Ask the community
,
1

I have a site that has an HTML element containing a chart I’m trying to pass data from a Wix collection to with the HTML “onMessage” function like so once it’s ‘ready’ so it’s loaded correctly

$w("#html1").onMessage((event) => {
if (event.data.type === 'ready') {
    $w("#html1").postMessage(data);
}
});

However, when putting logs withing the if (event.data.type === ‘ready’) condition, it is accessed multiple times, sending the data multiple times as well which is problematic for my implementation.

My ready function is as so

function ready() {
    window.parent.postMessage({"type":"ready"}, "*");
}

When logs are placed inside this function, it seems it’s only called once however, so I have no idea as to the source of the problem or why I am getting the behavior I am.

2

We need to see where and how the ready-function is called. Please post html-code to help you better.

3

My HTML element code looks like this

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
<body onLoad="ready()">
   <script type="text/javascript">
     var dataEV = [
          ['Country', 'EV Percentage Penetration', 'Total EV'],
        ]
     window.onmessage = function(event){
       if (event.data && Array.isArray(event.data)) {
         event.data.forEach((d)=>{
           if (d.evPercentage == undefined) {
             d.evPercentage = 0
            }
           if (d.totalEv == undefined) {
    	     d.totalEv = 0
           }
         dataEV.push([d.country, d.evPercentage, d.totalEv])
        })
        google.charts.setOnLoadCallback(drawRegionsMap(dataEV));
      }
    }
    
    google.charts.load('current', {
        'packages': ['geochart'],
        'mapsApiKey': /* api key */
      });
      
    function drawRegionsMap(dataEV) {
        var data = google.visualization.arrayToDataTable(dataEV);
        var options = {
          legend: 'none',
        }
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart.draw(data, options);
      }

    function ready(){
       console.log("Only shows up once")
       window.parent.postMessage({"type":"ready"}, "*");
    }
    </script>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
<!--HTTPS only...-->
4

In order to locate the problem, can you please try to check if the ifrmae post to parent several times or only once?
Can you try to see if it only happens when you post onLoad or also on other events?
Can you see when you refresh the page (the browser), how many times it fires?

5

@jonatandor35 The console.log within my ‘ready()’ function only fires once based on the browser logs

6

Let me understand if I got it right.
When you refresh the page it fires once.
When you navigate to another page it fires twice.
When you navigate to the third page it fires 3 times
and so on…

Is that correct?

7

The code is only present on one page, and when I load that page, or refresh it, I only see the log “Only shows up once” one time, each time I load that page

8

@crishobson So I’m confused, you said “…receiving “ready” message multiple times”. and now you’re saying it logs one time only?

9

The log from the Wix website, in the wix console, has the code from my Wix page code firing multiple times, as if it has been received multiple times; this DESPITE that the iframe, whose logs I can only see in the ‘Inspect’ browser console, says it is only sending that message 1 time. I’ll try show what I mean in images.

1837×636 91.2 KB

1495×729 64.4 KB

So the frame seems to be sending the information only once, but Wix is receiving it multiple times