JSFiddle - React, Tailwind, and code Playground

JavaScript

$(function() {

  var url = "http://www.wpclipart.com/animals/cats/Cat_outside.png";
  var iframe = $("<iframe>", {
    "id": "frame",
    "width": "100px",
    "height": "50px"
  });
  var body = $("body").append(iframe);
  //        .then(function(body) {
  var img = $("<img>", {
    "id": "frameimg",
    "width": "400px",
    "height": "300px",
  }).css("background", "blue");
  var a = $("<a>", {
    "href": url,
    "html": img
  }).css("textDecoration", "none");
  var button = $("<button>", {
      "html": "click"
    }).css({
      width: iframe.prop("width"),
      height: iframe.prop("height"),
      fontSize: "48px",
      position: "absolute",
      left: 0
    })
    .one("click", function(e) {
      $(this).remove()
      body.find("#frame")
        .attr("width", "400px")
        .attr("height", "300px")
        .attr("style", "")
        .contents()
        .find("body a")
        .get(0).click()
    });
  button.appendTo(body);
  body.find("#frame").contents()
    .find("body").html(a);
})