postMessage( )

Sends a message to the page's parent.

Description

If a page is embedded within another site, using an HtmlComponent on a Wix site or an iframe on a non-Wix site, you can use the postMessage() function to send a message from the inner site to the outer site.

When the parent site is a Wix site, use the onMessage() function to receive the message on the parent page.

When the parent site is a non-Wix site, use the page's window.onMessage event handler to read the data property of the received MessageEvent to receive the message on the parent page.

Syntax

function postMessage(message: Object, [target: string]): Promise<Object>

postMessage Parameters

NAME

TYPE

DESCRIPTION

message

Object

The message to send.

target

Optional

string

The target to send the message to. Must be "parent" or omitted. Defaults to "parent".

Returns

Fulfilled - The data returned from the page's parent. Rejected - The error that caused the rejection.

Return Type:

Promise<Object>

Was this helpful?

Send a message to a Wix parent site

Copy Code

1/* * * * * * * * * * * * * * * * * * * * * * *
2 * Code for the inner site to post a message *
3 * * * * * * * * * * * * * * * * * * * * * * */
4import wixWindowFrontend from 'wix-window-frontend';
5
6// ...
7
8wixWindowFrontend.postMessage(dataObj);
9
10/* * * * * * * * * * * * * * * * * * * * * * * * *
11 * Code for the outer site to receive a message  *
12 * * * * * * * * * * * * * * * * * * * * * * * * *
13 *
14 * $w("#myHtmlComponent").onMessage( (event, $x) => {
15 *   let message = event.data;
16 * } );
17 */

Send a message to a non-Wix parent site

Copy Code

1/* * * * * * * * * * * * * * * * * * * * * * *
2 * Code for the inner site to post a message *
3 * * * * * * * * * * * * * * * * * * * * * * */
4import wixWindowFrontend from 'wix-window-frontend';
5
6// ...
7
8wixWindowFrontend.postMessage(dataObj);
9
10/* * * * * * * * * * * * * * * * * * * * * * * * *
11 * Code for the outer site to receive a message  *
12 * * * * * * * * * * * * * * * * * * * * * * * * *
13 *
14 * <script>
15 *   window.addEventListener("message", event => {
16 *    let message = event.data;
17 *   } );
18 * </script>
19 */