postMessage( )

Sends a message to the HTML Component.

Description

The postMessage() function sends a message from your page code to the HTML Component.

To receive the message sent from the postMessage() function in your HTML Component, create an event handler for the window.onmessage event in the component's code. You create the event handler within an HTML <script> tag. You get the received data by getting the data property of the event handler's event parameter.

Often, you define the window.onMessage event handler in a function that gets called when the HTML component loads using the body onload or window.onload:

 <script type="text/javascript">
   window.onmessage = (event) => {
     if (event.data) {
       console.log(`HTML Component received a message: ${event.data}`);
       // additional code here
     }
   }
 </script>

Copy Code

For more information on sending and receiving messages between your page and your HTML Component, see Working with the HTML Component in Wix Code.

Notes:
An HTML Component needs to load before you can send it messages using the postMessage() function.
Usually an HTML Component finishes loading a short time after the page it is on finishes loading. So if you call postMessage() inside the page’s onReady() event handler, the HTML Component might not be ready yet. To call postMessage() as soon as possible after a page loads, send a message from the HTML Component to the page code as when the HTML Component is loaded and then call postMessage() upon receipt of that message.
Also, an HTML Component can send messages to the page it is on before the HTML Component itself has loaded completely. For example, this can happen if the HTML Component’s body, or one of its downloaded images, is large. To make sure the HTML component is loaded, send messages only after listening for an onLoad event in the HTML component.

Syntax

function postMessage(message: string | number | boolean | Object | Array<*>): void

postMessage Parameters

NAME

TYPE

DESCRIPTION

message

string | number | boolean | Object | Array<*>

The message to send to the HTML Component.

Returns

This function does not return anything.

Return Type:

void

Related Content:

onMessage( )

Was this helpful?

Send a message to an HTML Component

Copy Code

1$w("#myHtmlComponent").postMessage("Message from page code!");

Communicate with an HTML Component

This example shows how to send information from the page to the HTML Component and from the HTML Component to the page. You can test out the code in our example template.

Copy Code

1$w.onReady(() => {
2  // Send message to HTML Component
3  $w('#sendButton').onClick(() => {
4    $w('#htmlComponent').postMessage('HELLO FROM THE PAGE');
5  });
6
7  // Handle messages that the HTML Component sends to the page
8  $w('#htmlComponent').onMessage((event) => {
9    $w('#message').text = event.data;
10  });
11});

Send a message to an HTML Component and receive a confirmation

This example assumes you have created a page with an HTML Component whose ID is myHtmlComponent and a button whose onClick event handler is set to messageSendButton_onClick.

When the user clicks the button, a message is sent to the HTML Code element. Code inside the element receives and displays the message. Then it sends a message back to the page code. The page code receives and logs the message.

Copy Code

1/* * * * * * * * * * * * * * * * * * * * * * * * *
2 * Paste the following into the HTML Component:  *
3 * * * * * * * * * * * * * * * * * * * * * * * * *
4
5<!doctype html>
6<html>
7<head>
8
9<script type="text/javascript">
10function init () {
11  // when a message is received from the page code
12  window.onmessage = (event) => {
13    if (event.data) {
14      console.log("HTML Code Element received a message!");
15      insertMessage(event.data);
16    }
17  }
18}
19
20// display received message
21function insertMessage(msg) {
22  document.getElementById('demo').innerHTML = msg;
23  sendReturnMessage("Message from the HTML Component!");
24}
25
26// send message to the page code
27function sendReturnMessage(msg) {
28  window.parent.postMessage(msg, "http://mysite.com");
29}
30</script>
31
32</head>
33
34<body onload="init();" style="background-color:lightgray;">
35<h1>HTML Component Test</h1>
36<p id="demo">Message will go here</p>
37</body>
38</html>
39
40 * * * * * * * * * * * * * * * * * * * * * * * * *
41 * This is the page code:                        *
42 * * * * * * * * * * * * * * * * * * * * * * * * */
43
44$w.onReady(function () {
45  // when a message is received from the HTML Component
46  $w("#myHtmlComponent").onMessage( (event) => {
47    console.log(`Message received by page code: ${event.data}`);
48  } );
49} );
50
51export function messageSendButton_onClick() {
52  // send message to the HTML Component
53  $w("#myHtmlComponent").postMessage("Message from page code!");
54}
55