Set iframe contents using jQuery

HTML

<div class="main">
  <iframe id="iframe1">
  </iframe>
</div>
<button disabled class='submitBtn'> Submit</button>

CSS

#iframe1 {
  border: solid 1px;
  border-radius: 8px;
  width: 80%;
  min-height: 80%;
  max-height: 80%;
  color: red;
  padding-top: 1em;
  margin: 0 auto;
}

JavaScript

$('#iframe1').contents().find('html').html("<h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1><h1 style='text-align: center;'>This IS an iframe</h1>");

function getFrameTargetElement(objI) {
  var objFrame = objI.contentWindow;
  if (window.pageYOffset == undefined) {
    objFrame = (objFrame.document.documentElement) ? objFrame.document.documentElement : objFrame = document.body;
  }
  return objFrame;
}

$("#iframe1").ready(function() {
  var frame = getFrameTargetElement(document.getElementById("iframe1"));

  frame.onscroll = function(e) {
    $('.submitBtn').prop('disabled', false);
  }
});