Search.../

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.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMessage(handler: HtmlComponentMessageEventHandler): HtmlComponent
handler: function HtmlComponentMessageEventHandler(event: HtmlComponentMessageEvent, $w: $w): 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:

HtmlComponentMessageEventHandler Parameters

NAME
TYPE
DESCRIPTION
event

HtmlComponentMessageEvent

The HtmlComponent event that occurred.

$w

$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

Returns

This function does not return anything.

Return Type:

void

Related Content:

Was this helpful?

Receive a message from an HTML Component

Code Example

Copy Code
1$w("#myHtmlComponent").onMessage( (event) => {
2 let receivedMessage = event.data;
3} );
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.

Code Example

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