JSFiddle - React, Tailwind, and code Playground

HTML

<p>
the inner frame src is set to a dataUri; click the link inside it
<em> the iframe will scroll to the fragment, as expected</em>
</p>
<iframe style="height:300px; overflow-y:scroll" name="mainFrame">

</iframe>

JavaScript

const smallHtmlContent = `<?xml version="1.0" encoding="ASCII"?><html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html" />
</head>

<body >
  
Hi click this <a href="#i01">link</a>

<p style="height:3000px;"></p>
<p id="i01"></p>

</body>
</html>`;


setTimeout(()=>{
  window.frames.mainFrame.addEventListener('click', ()=>{

  });
}, 1000);

let dataUri = `data:text/html,${encodeURIComponent(smallHtmlContent)}`;


                        
//document.querySelector('iframe').srcdoc = smallHtmlContent;

                        
document.querySelector('iframe').src = dataUri;