HTML window.onmessage function not working in published site environment

Ask the community
,
1

Hi, I have setup Wix code to send a message from my wix site page to my HTML iframe widget. This works fine when I preview the site, but is not working once published. See my console and code below. Data I am sending is the current window dimensions. Any help is appreciated.

Preview console:*

Loading the code for the site. To debug this code, open masterPage.js in Developer Tools. wixcode-worker.js:17:170380
Loading the code for the Track map page. To debug this code, open iscxh.js in Developer Tools. wixcode-worker.js:17:170380
Array [ 773, 1428 ] get_draft:130:5 // This is the event.data message coming through fine
684px = current mapCanvas height get_draft:131:5 //From here…
773px = new mapCanvas height get_draft:138:5
1428px = new mapCanvas width get_draft:139:5
773px = new mapDiv height get_draft:140:5
1428px = new mapDiv width get_draft:141:5 //…to here is code within the window.messageon function
Track map page was delayed by 6ms due to code wixcode-worker.js:17:170380
Error: WebGL warning: : Exceeded 16 live WebGL contexts for this principal, losing the least recently used one. map.js:1482:19
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
texture.js:73:16
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. line_atlas.js:142:12
Error: WebGL warning: texSubImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. line_atlas.js:149:16
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.

Published site console:

Loading the code for the site. To debug this code, open masterPage.js in Developer Tools. wixcode-worker.js:17:170380
Loading the code for the Track map page. To debug this code, open iscxh.js in Developer Tools. wixcode-worker.js:17:170380
Track map page was delayed by 5ms due to code wixcode-worker.js:17:170380
// event.data and all window.onmessage output missing here
The resource at “https://www.google-analytics.com/analytics.js” was blocked because content blocking is enabled.[Learn More] track-map
Loading failed for the with source “https://www.google-analytics.com/analytics.js”. track-map:1:1
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
texture.js:73:16
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
texture.js:73:16
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. line_atlas.js:142:12
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
texture.js:73:16
Error: WebGL warning: texSubImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. line_atlas.js:149:16

Code on wix site:**

import wixWindow from ‘wix-window’;

var windowHeight;
var windowWidth;
var dimensions= ;

$w.onReady( async function () {
await wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
dimensions[0] = windowSizeInfo.window.height;
dimensions[1] = windowSizeInfo.window.width;
});

$w("#html1").postMessage(dimensions);

});

Code within html module:**

var height;
var width;

window.onmessage = (event) => {
if (event.data) {
var mapCanvas = document.getElementsByClassName(‘mapboxgl-canvas’)[0];
var mapDiv = document.getElementById(‘map’);
console.log(event.data); // Dimensions array
console.log(mapCanvas.style.height + " = current mapCanvas height");
height = event.data[0];
width = event.data[1];
mapCanvas.style.height = height + “px”;
mapCanvas.style.width = width + “px”;
mapDiv.style.height = height + “px”;
mapDiv.style.width = width + “px”;
console.log(mapCanvas.style.height + " = new mapCanvas height");
console.log(mapCanvas.style.width + " = new mapCanvas width");
console.log(mapDiv.style.height + " = new mapDiv height");
console.log(mapDiv.style.width + " = new mapDiv width");
map.resize();
}
}

2

Hey
You are not waiting for the window size information to be returned before you use postMessage. So when a published site use this it will go way faster and you will postMessage before you get the data you need. Try to move the postMessage into the promise that awaits the parameters like this.

$w.onReady(function() {
  wixWindow.getBoundingRect()
           .then((windowSizeInfo) => {
                        dimensions[0] = windowSizeInfo.window.height;
                        dimensions[1] = windowSizeInfo.window.width;
                        $w("#html1").postMessage(dimensions); 
            });
});

Then I don’t believe you will need async/await because you will await the promise using the .then

3

Thanks Andreas. I have tried your code and unfortunately it doesn’t seem to be working for either preview or published. The array dimensions don’t come through in the console in either.

4

It´s very late here, my eyes are starting to give light. But anyway, I think you are also running into the timing problem, or, shorter: you send the dimension info to the html-component before it is loaded (and thus ready to receive). Have you read my article about this: https://girizano.wixsite.com/codecorner/home/html-component-not-running-in-publish-mode-google-sheets-example

5

Hi Gino - thanks for the link, I’ve been able to implement something from your solution to make this work! Cheers!