<iframe src="//slides.com/news/make-better-presentations/embed?postMessageEvents=true" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<div class="controls">
  <div class="status"></div>
  <button class="trigger">Go to random slide</button>
</div>
.controls {
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  font-family: sans-serif;
}

.status {
  display: none;
  margin-bottom: 20px;
}

.status:before {
  display: block;
  content: "State";
  font-weight: bold;
}

.status:not(:empty) {
  display: block;
}

/**
 * Example showing how to receive events from the presentation
 * when the current slide changes. Note that you need to include
 * 'postMessageEvents=true' in the query string portion of the
 * presentation URL for this to work.
 */
window.addEventListener( 'message', function( event ) {
  var data = JSON.parse( event.data );
  
  // Make sure we're talking to a presentation
  if( data.namespace === 'reveal' ) {
    
    // We only care about the slide changing. The 'ready' event
    // is sent in place of a 'slidechanged' for the very first
    // slide when the presentation loads.
    if( data.eventName === 'slidechanged' || data.eventName === 'ready' ) {

      // Dig out the presentation state, key properties:
      //   indexh: The index of the current horizontal slide
      //   indexv: The index of the current vertical slide (if any)
      //   indexf: The index of the current fragment (if any)
      var state = data.state;

      document.querySelector( '.status' ).innerHTML = 'indexh: ' + state.indexh + '<br>' +
                                                      'indexv: ' + state.indexv;

    }

  }
} );

/**
 * Example of sending messages into the presentation frame.
 * In this example we're sending a message for navigating
 * to a random slide, however you can find a full list of
 * what functions there are available here:
 * https://github.com/hakimel/reveal.js#api
 */
document.querySelector( '.trigger' ).addEventListener( 'click', function( event ) {
  event.preventDefault();
  
  // Find our presentation iframe
  var frame = document.querySelector( 'iframe' );
  
  // Post a message into the frame
  frame.contentWindow.postMessage( JSON.stringify({
    method: 'slide',
    args: [ Math.ceil( Math.random() * 10  ) ]
  }), '*' );
} );
Rerun