JSFiddle - React, Tailwind, and code Playground

HTML

<div id=chatbot>
  <iframe id=frame>

  </iframe>
</div>

JavaScript

const frame = document.getElementById( "frame" );
frame.src = URL.createObjectURL( new Blob( [ `
  <div id="target"></div>
  <script>
    const target_el = document.querySelector("#target");
    setInterval( () => target_el.append("hello - "), 1000 );
  <\/script>
` ], { type: "text/html" } ) );

// removed a lot of unrelated stuff from OP,
// to keep only the core of the issue
function bind() {
  const iframeBody = frame.contentWindow.document.body;
  if( !iframeBody ) {
    return setTimeout( bind, 500 );
  }
  if( iframeBody ) {
    console.log( "iframeBody found" );
    console.log( "location:", iframeBody.ownerDocument.location.href );
               // logs "about:blank" in Firefox
  }
}
bind();