html.postMessage doesn't work

Ask the community
,
1

$w . onReady ( function () {

console . log ( "aaa" ); 
$w ( '#html1' ). postMessage ( "aaa" );

});

html1 will not be changed.

2

What code do you have inside your HTML-Component?

You need a code for both → PAGE & HTML-Component.

If you HTML-Component has no related code to your PAGE-CODE → nothing will work !!!

3

in my page does exist an empty html-component with the name “html1”.

when i fill the html component with an external url with …

$w ( ‘#html1’ ).src = "https://www.fo.bar/aaa.html

…then the “aaa” content will be shown correctly.

if i use insteed the js function …

’ $w ( ‘#html1’ ). postMessage ( “aaa” );

… nothing will happen.

4

That’s correct !!! It works exactly like it should!

In your first example → w ( ‘#html1’ ).src = "https://www.fo.bar/aaa.html
You are loading a URL into the html-component.

In your second example: —> $w ( ‘#html1’ ). postMessage ( “aaa” );
You are sending data over to the component, but the component do not know what to do with the sent data.

Tha’s it!

Where is the code for the second part?
You have a → SENDER
But NO → RECEIVER

You have to generate a code insde the COMPONENT, to be able to tell the component, what to do with the received data (inside html).

EXAMPLE: Code for your HTML-Component (iFrame)…

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
}
</script>
</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>

The onLoad → will start all the process…

!!! Good luck and happy coding !!!

Code-Ninja

5

Perfect! Thanks, it works! I’ve thought that the html-component is already encapsulated in a JS event handler. To wright an own one was the solution! But i think this tip should be written by the VELO api docs as well.

6

No problem.
You got a → PERFECT-ANSWER <— ??? So don’t hesitate to mark it as → BEST-ANSWER <— :wink:

Unfortunately → the most forget about such function, given here inside this forum.