JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<h2>outside iframe</h2>
<div id="container">
<iframe id="iframe" frameborder="1" src='javascript:""' width="450" height="200" style="border: 1px solid #ccc; vertical-align: bottom;"></iframe>
</div>

<p id="info"></p>

JavaScript

jQuery(function($) {
    setupIFrame($('#iframe')[0]);
    
    var info = $('#info');
    $('body').click(function(e) {
        info.html('clicked ' + e.target.nodeName);
    });
    
});

function setupIFrame(iframe) {
    var aContent = [];

    aContent.push('<!DOCTYPE html>'); // needed for non-quirks mode
    aContent.push('<html><body>');
    aContent.push('<h3>inside iframe</h3>');
    aContent.push('</body></html>');
    iframe.contentWindow.document.body.innerHTML = aContent.join('');
}