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 try to navigate to another URL relative to the parent??? in this case, results in a 404 error</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>`;



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


document.querySelector('iframe').onload = ()=>{
window.frames.mainFrame.addEventListener('click', function(e){

//debugger;
// get the attribute value
// dont get the href property, it will be pointing at an absolute URL https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href
const href_val = e.target.attributes.href.value

if (e.target.href && href_val[0]==='#'){
	e.preventDefault(); 
  e.stopPropagation(); 
  window.frames.mainFrame.location.hash = href_val;
}
});
};


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