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

はじめに

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

この記事は2022/09/26時点でのWixを前提に書かれています。Wixの更新によって内容がそのまま適用できない可能性がありますのでご注意ください。

Wixとは

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

HTMLコンポーネント

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

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

メッセージ関数

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

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

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

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

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

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

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

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