WixのHTMLコンポーネントは、親ページとpostMessageで通信します

はじめに

この記事は、WixのHTMLコンポーネントと通信をするための方法を解説、共有するためのものです。

Wixとは

WixはhtmlやJavaScriptの知識がなくてもWebページを作成できるオンラインツールです。Wixはユーザーが自身のサイトを破壊してしまわないよう、JavaScriptの機能を制限しています。例として、Wix上で編集できるJavaScriptからはWindowインターフェースに直接アクセスできません。

HTMLコンポーネント

こうした制限の中で、よりリッチな表現や機能が必要になった時に利用するのがサイト埋め込み機能です。Wixのオンラインエディタから他のサイトのURLを指定し、iframeとして埋め込みます。

サイト埋め込み機能で作成されるコンポーネントがHTMLコンポーネントです。HTMLコンポーネント内は、Wixのスクリプト制限を受けません。

メッセージ関数

iframe内のJavaScriptは、読み込み元サイトのJavaScriptとメッセージ関数で通信します。メッセージ関数を使うことで、クロスドメイン制限を受けずに安全にメッセージを受け渡せます。

Window.postMessage() - Web API | MDN

https://developer.mozilla.org

HTMLコンポーネント内からは、postMessage関数を使ってメッセージを送信します。

WixではWindowインターフェースが隠蔽されているためaddEventListenerでメッセージイベントが受け取れません。そのためWixは専用のAPIonMessageを用意しています。

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

HTMLコンポーネントのIDを指定してonMessage関数でメッセージイベントを受け取ります。event.data内にpostMessageで送信した内容が格納されています。

:::note 上記リンクでは、URL内の$記号がエスケープされるためドキュメントに辿り着けません。下記URLをコピー&ペーストしてドキュメントをご覧ください。

https://www.wix.com/velo/reference/$w/htmlcomponent/onmessage

:::

以上、ありがとうございました。