onMessage( )

Adds an event handler that runs when the HTML Component sends a message.

Description

The onMessage() function allows your page code to receive messages from an HTML Component on your page. When a message is received, the specified event handler is executed and the message can be retrieved using event.data.

To send a message from your HTML Component, use the postMessage() function in the HTML component's code. Generally, you call postMessage() from within a function:

 <script type="text/javascript">
   function sendReturnMessage(msg) {
     window.parent.postMessage(msg, "http://mysite.com");
   }
 </script>

Copy Code

When posting a message from within your HTML Component, you should specify your site's URL as the targetOrigin. If you use "*" instead, your message can be intercepted by a malicious site. To learn more, see Window.postMessage().

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

Syntax

function onMessage(handler: HtmlComponentMessageEventHandler): HtmlComponent
handler: function HtmlComponentMessageEventHandler(event: HtmlComponentMessageEvent): void

onMessage Parameters

NAME

TYPE

DESCRIPTION

handler

HtmlComponentMessageEventHandler

The name of the function or the function expression to run when the HTML Component sends a message.

Returns

The HTML Code element that triggered the event.

Return Type:

HtmlComponent

HtmlComponentMessageEventHandler Parameters

NAME

TYPE

DESCRIPTION

event

HtmlComponentMessageEvent

The HtmlComponent event that occurred.

Returns

This function does not return anything.

Return Type:

void

Related Content:

postMessage( )

Was this helpful?

Receive a message from an HTML Component

Copy Code

1$w("#myHtmlComponent").onMessage( (event) => {
2  let receivedMessage = event.data;
3} );

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