JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="my-frame"></iframe>
<button id="btn" disabled>next</button>

JavaScript

const urls = [];
for( let i = 0; i<10; i++ ) {
  urls.push( makeDocURL( i ) );
}

const btn = document.getElementById( "btn" );
const frame = document.getElementById( "my-frame" );
frame.onload = e => {
  const win = frame.contentWindow;
  frame.onload = null;
  win.addEventListener( 'unload', attachEvents );
  YOUR_CALLBACK(); // make it fire even at beginning?

  function attachEvents()  {
    setTimeout( () => {
      win.addEventListener( 'DOMContentLoaded', YOUR_CALLBACK );
      win.addEventListener( 'unload', attachEvents ); // do it again at next navigation
    }, 0 );
  };
};
frame.src = "about:blank";
btn.onclick = (e) => {
  btn.disabled = true; // if YOUR_CALLBACK is not called, the button would stay disabled
  frame.src = urls.shift();
};

function YOUR_CALLBACK() {
	console.log( 'DOM loaded' );
  btn.disabled = false;
}


function makeDocURL( index ) {
  const content = `
    <html>
      <body>
        <h1>Page ${ index }</h1>
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Christchurch_Art_Gallery%2C_Christchurch%2C_New_Zealand.jpg?rand=${ index } ">
      </body>
    </html>`;
  const blob = new Blob( [ content ], { type: 'text/html' } );
  return URL.createObjectURL( blob );
}