I have a web application that serves a large React app into an iframe, allowing me to embed specific screens from my React app into other pages. I do this by, whenever the parent application requests a new page, creating a new iframe and setting its src to the correct url within my react app. Pseudocode for this process:

user selects a screen
clear the HTML of the iframe parent element (thus removing the old iframe)
create a new iframe, set its src to the proper page of the react app
append the iframe to the container
 

There’s enough application code that providing it here would be an enormous endeavor.

I have a bug where switching between screens too quickly causes the screen to completely stop rendering and go white- the new iframe’s src attribute is set but it contains either nothing or about:blank. This only happens on chrome, not firefox. Examining chrome’s performance log shows that while the application is stuck on the white screen, the CPU is maxed out and React is stuck trying to commit a DOM update and reconcile the tree in an infinite loop. The iframe load event does not trigger. Switching off of a page while it is in this frozen state will not properly render the new iframe unless I wait for a while on the frozen page.

I can prevent the freeze by keeping the old iframes in the DOM in the background and setting their display to none. Obviously this is an enormous performance hit and is not a workable fix. I’ve tried to keep pointers to old iframes and remove them from the DOM if they are loaded, but I get the freeze even when I switch screens shortly after the iframe load event triggers (but before my react app is completely loaded). Since this issue seems to be tied to the loading of my react app I’d expect to be able to keep them in the DOM in the background until they’re loaded, thus preventing the freeze, and then safely remove them once they will no longer impact the loading of new pages. However, I have not yet found a safe way to do this.

Is there a good way to detect when my iframe (and contents within) are completely loaded? Or has anyone encountered a similar issue before?