JSFiddle - React, Tailwind, and code Playground

by mostlygeek

HTML

<html>
<body>
    <!-- iframe will go below -->
    <div id="foo"></div>
</body>
</html>

JavaScript

/*
Was watching this talk: http://www.youtube.com/watch?v=y4lBEZTThvg
about iframes and JS ... so this will create a new iframe, inject new 
HTML content into it and send it messages through the window.location.hash every second
 */

el = document.getElementById('foo');
iframe = document.createElement('iframe');
iframe.src = "about:blank";

el.appendChild(iframe)
       
// the iframe has to be part of the DOM before we can access it... 
iDoc = iframe.contentWindow.document;
iDoc.open('text/html', 'replace');

// stick in some content ... dynamically ... ohh 
src = '<html><body><div id="out"><\/div><div id="message">--<\/div><script>'
    + 'var c=0; var c2=0; var el=document.getElementById("out"); '
    + 'var msgEl = document.getElementById("message");'
    + 'window.onhashchange = function() { el.innerHTML = "change #" + (c++) + ", time: " + window.location.hash; };'
    + 'function setMessage(msg) { msgEl.innerHTML = "last msg #" + (c2++) + ", time: " + msg; }'
    + '<\/script><\/body><\/html>';

iDoc.write(src);
iDoc.close();

(function() {
    var c = 0;
    // this is dog ass slow... and it sort of triggers a fake refresh of the page
    // let's not do this ... well we can use it to make the user's browser *really* slow
    setInterval(function() {
        iframe.contentWindow.location.hash = "" + (Date.now() / 1000);
    }, 2500);
    
    // this is really fast... 16ms = 60fps
    setInterval(function() {
        iframe.contentWindow.setMessage("" + (Date.now() / 1000));
    }, 16);
    
})();