JSFiddle - React, Tailwind, and code Playground

HTML

<form> 
    <input type="button" value="new test run (with memory leak)" onclick="newFrame(0);"/> 
    <input type="button" value="new test run (without memory leak)" onclick="newFrame(1);"/>  
</form> 
<div id="frameContainer"></div> 
<div id="frameInputHasFocus"></div> 
<div id="i"></div>

JavaScript

var iterations = 2000;
var i = 0;
var newFrame = function(unbind) {
    alert('a');
    document.querySelector("#frameContainer").innerHTML = "<iframe id='iFrame' src='b.html'  ></iframe>";
    $("#iFrame").bind('load', function() {
        var frameBody = $(this).contents().find("body");
        var input = frameBody.find("input");
        input.focus(function() {
            parent.document.querySelector('#frameInputHasFocus').innerHTML = "Frame input got focus.";
        });
        if (++i % iterations) setTimeout("deleteFrame(" + unbind + ");", 10);
    });
}
var deleteFrame = function(unbind) {
    if (unbind) $("#iFrame").contents().find("body").find("input").unbind(); // This will remove the leak.
    $("#frameContainer").empty();
    if (i % iterations) setTimeout("newFrame(" + unbind + ");", 10);
    document.querySelector('#i').innerHTML = i + ' of ' + iterations;
}