<html> <body> <iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe> <div> <input id="back" type="button" value="go back"/> <input id="ahead" type="button" value="go ahead"/> <input id="slideto" type="button" value="slideto 2-2"/> </div> <script> (function (){ var back = document.getElementById( 'back' ), ahead = document.getElementById( 'ahead' ), slideto = document.getElementById( 'slideto' ), reveal = window.frames[0]; back.addEventListener( 'click', function () { reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' ); }, false ); ahead.addEventListener( 'click', function (){ reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' ); }, false ); slideto.addEventListener( 'click', function (){ reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' ); }, false ); }()); </script> </body> </html>