postMessage API

このフレームワークには、別のウィンドウ内のプレゼンテーションと通信するときに使用できる組み込みの postMessage API があります。指定されたウィンドウ内の reveal.js インスタンスを 2 番目のスライドに進める方法を示す例を次に示します

<window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' );

postMessage イベント

reveal.js が iframe 内で実行されると、必要に応じて、すべてのイベントを親にバブル送信できます。バブル送信されたイベントは、名前空間、イベント名、状態の 3 つのフィールドを持つ文字列化された JSON です。親ウィンドウからサブスクライブする方法を次に示します。

window.addEventListener('message', (event) => {
  var data = JSON.parse(event.data);
  if (data.namespace === 'reveal' && data.eventName === 'slidechanged') {
    // Slide changed, see data.state for slide number
  }
});

postMessage コールバック

postMessage API を経由してメソッドを呼び出すと、reveal.js は戻り値を含むメッセージをディスパッチします。これは、ゲッターメソッドを呼び出してその結果を確認できるようにするために行われます。この例を参照してください

<revealWindow>.postMessage( JSON.stringify({ method: 'getTotalSlides' }), '*' );

window.addEventListener( 'message', event => {
  var data = JSON.parse( event.data );
  // `data.method`` is the method that we invoked
  if( data.namespace === 'reveal' && data.eventName === 'callback' && data.method === 'getTotalSlides' ) {
    data.result // = the total number of slides
  }
} );

postMessage のオン/オフの切り替え

このウィンドウ間のメッセージングは、構成フラグを使用してオンまたはオフに切り替えることができます。デフォルト値を次に示します。

Reveal.initialize({
  // Exposes the reveal.js API through window.postMessage
  postMessage: true,

  // Dispatches all reveal.js events to the parent window through postMessage
  postMessageEvents: false
});