JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<body>

    <!-- For jsfiddle, must have "No wrap - in <body> under Frameworks & Extensions on the left side of this page.  -->
    
    
    <iframe src="https://appetize.io/embed/bp8h41ey07qv3wp2hfy7vh9wn4?device=iphone5s&orientation=portrait&scale=75&xdocMsg=true&deviceColor=white&debug=true&screenOnly=false" width="600px" height="600px" frameborder="0" scrolling="no"></iframe>
    
    
    
    <hr/>
    
    <button onclick="requestSession()">requestSession</button>
    <button onclick="emitHomeButton()">emitHomeButton</button>
    <button onclick="rotateLeft()">rotateLeft</button>
    <button onclick="rotateRight()">rotateRight</button>
    <button onclick="saveScreenshot()">saveScreenshot</button>
    <button onclick="heartbeat()">heartbeat</button>
    <button onclick="mouseclick(160, 130)">mouseclick 160, 130</button>
    <button onclick="keypress('c', false)">keypress lowercase c</button>
    <button onclick="keypress('c', true)">keypress uppercase C</button>
    <button onclick="restartApp()">restartApp</button>
    <button onclick="endSession()">endSession</button>
    
</body>

CSS

button{
    margin-bottom: 10px;
}

JavaScript

// Sending messages to iframe from parent window
var iframe = document.querySelector('iframe');

function requestSession(){
    iframe.contentWindow.postMessage('requestSession', '*');
}

function emitHomeButton(){
    iframe.contentWindow.postMessage('emitHomeButton', '*');
}

function rotateLeft(){
    iframe.contentWindow.postMessage('rotateLeft', '*');
}

function rotateRight(){
    iframe.contentWindow.postMessage('rotateRight', '*');
}

function saveScreenshot(){
    iframe.contentWindow.postMessage('saveScreenshot', '*');
}

function heartbeat(){
    iframe.contentWindow.postMessage('heartbeat', '*');
}

function mouseclick(x, y){
    iframe.contentWindow.postMessage({type:'mouseclick', x: x, y: y}, '*');
}

function keypress(key, shiftKey){
    iframe.contentWindow.postMessage({type:'keypress', key : key, shiftKey: shiftKey}, '*');
}

function restartApp(){
    iframe.contentWindow.postMessage('restartApp', '*');
}

function endSession(){
    iframe.contentWindow.postMessage('endSession', '*');
}


// Receiving messages from iframe in parent window
var messageEventHandler = function(event){
    
    if(event.data == 'sessionRequested'){
        console.log(event.data);
    }
    
    else if(event.data == 'userError'){
        console.log(event.data);
    }
    
    else if(event.data == 'firstFrameReceived'){
        console.log(event.data);
    }
    
    else if(event.data == 'timeoutWarning'){
        console.log(event.data);
    }
    
    else if(event.data == 'sessionEnded'){
        console.log(event.data);
    }
    
};

window.addEventListener('message', messageEventHandler, false);