$w('#html1').postMessage("<html>Hi!</html>"); shows nothing

Ask the community
,
1

It seems a very simple code I paste in button click
$w(‘#html1’).postMessage(“Hi!”);

but it shows nothing?? What do I miss? Help pls!

2

Hi,

postMessage(…) does not set the content of HTML component. It marelly posts the message to the component, that can be then received and acted upon.

You can do that with a bit of code inside of HTML. The code would receive the message and make it appear in the component. You can put this snippet into HTML component:

<script>
window.onmessage = (event) => {
  document.getElementById("container").innerHTML = event.data;
}
</script>
<div id="container">
</div>

What it does, is listens to the message being posted and sets the content to the div container.

I hope this helps. Let me know!

You can also checkout the documentation here

And a community tutorial of a more complex case:

3

Seems still miss something. I change my on click code and html code as following:

export function button2_click(event, $w) {
let bodycode = $w(‘#textBox1’).value;
$w(‘#html1’).postMessage(bodycode);
console.log(bodycode);}

** The following HTML code I paste in #textBox1 , also tried paste in #text **

Hi!

When button click, console log shows the html code but #html1 stay still.

4

In Preview or Publish Mode?

5

Preview or live mode (after Publish) make no different. um…

6

Hey stone,

You can’t paste HTML code in a text box - it goes in an HtmlComponent.

I would recommend reading the article Working with the HTML Component in Wix Code . There is also a very nice and simple example in the description of the onMessage() function - just scroll down a bit to find it. Try this example yourself and then you can modify it for your own use.

Good luck and have fun,

Yisrael