postMessage API

框架有一个内置的 postMessage API,在另一个窗口内的演示文稿进行通信时可以使用。以下是一个示例,展示了如何在给定的窗口中让一个 reveal.js 实例跳转到幻灯片 2

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

postMessage 事件

当 reveal.js 在 iframe 内部运行时,可以选择将它的所有事件发送到父项。发送的事件是带有三个字段的 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 会发送一个带返回值的消息。这样做的目的是让你能够调用一个 getter 方法,并查看返回值。查看以下示例

<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
});