JSFiddle - React, Tailwind, and code Playground

by ChrisP

HTML

<div id="container">
    <p>Here is the iframe:</p>
    <iframe src="about:blank" id="main_frame" name="main_frame"></iframe>
</div>

CSS

#container {
    margin: 8%;
    font-size: 14pt;
}

iframe {
    border: 1px solid gray;
    width: 350px;
    margin-top: 20px;
}

JavaScript

/*    (void)
 *    Load some content into an iframe using jQuery
 */
function loadContent(/* string */ html) {
    if (typeof html != 'string') {
        alert('Must pass string content to display in iframe.');    
    } else {
        $('#main_frame').contents().find('html').html(html);
    }
}

//  Wait, then load something into the blank frame...
var first_timer = setInterval( function () {
  //  Show some content in the frame
  var content_on_demand = "<html><head></head><body><div id=\"msg\">Hello World</div></body></html>";
  loadContent(content_on_demand);
}, 2000);

var second_timer = setInterval( function () {
    //  Get the window object of the iframe.
    var frame_window = window.frames['main_frame'];
    var message_div = frame_window.document.getElementById('msg');
    message_div.innerHTML = 'Hello New Year!';
}, 3000);