PostMessage not sending data to HTML component

Ask the community
,
1

Can anyone assist with this. I’m trying to send Boundingbox rect data to the HTML component. It’s giving me undefined parameters.

velo page code:

import wixWindow from ‘wix-window’ ;

$w . onReady ( async () => {
let x , y ;

await wixWindow . getBoundingRect ()
. then (( result ) => {
const window = result.window ;
x = window.width ;
y = window.height
$w ( “#html1” ). postMessage ( x );
$w ( “#html1” ). postMessage ( y );
})

} );

html Java to receive the post messages

var height; 
var width; 

window.onmessage = (event) => { 
  if (event.data) { 
	height = event.data(x); 
    width = event.data(y); 
  } 
};
2

Try something like:

//...
.then(result => {
  const window = result.window;
   x = window.width;
   y = window.height
   $w("#html1").postMessage({x,y}); 
})
//...

And in the html

<!--some html code-->
<script>
//code...
var height;
  var width;
  window.onmessage = (event) => {
     if (event.data) {
    	    height = event.data.y;
        	width = event.data.x;
      }
//code...
</script>
<!--some html code-->
3

Hey J.D.

That works kind of. It only gets the first viewport size, but if I change the size at all the numbers still stay the same. Is there any way to consistently get the bounding box on resizing?

4

Yes.
the question is you wish to detect changes in the iframe size or the parent window size.
If it’s the iframe, put this part in the iframe html script:

addEventListener("resize", (event) => {
let width = event.currentTarget.outerHeight;//or innerHeight depends on what you need
let height = event.currentTarget.outerWidth;
});

If you need the parent page size,
You will have to create a custom element, add an eventListener to detect change, the dispatch the event to the page and post it to the iframe.