React, Iframes, and a Back-Navigation Bug

[AleksandrHovhannisyan]

[georgeloring]

We just ran into this exact issue. Thanks for taking the time to put together this great write-up on it! Saved us a lot of time.

[AleksandrHovhannisyan]

Thanks! Glad to hear it helped 😄

[abhi-shek-gupta]

Hey @AleksandrHovhannisyan, in my case still facing the issue of the back button, tried both the solutions

[AleksandrHovhannisyan]

@abhi-shek-gupta Sorry to hear that! Unfortunately, without seeing the code, I can't really say what the problem might be.

[justinwerd]

Thanks @AleksandrHovhannisyan for the informative article. one question I had was about the src property. I'm using typescript and am getting errors because src does not exist on the node object returned by cloneNode. is there another property that would be equivalent?

[AleksandrHovhannisyan]

@justinwerd Hmm, I haven't seen cloneNode used in React; could you share a small code sample to clarify what you're trying to do? Thanks!

[justinwerd]

@AleksandrHovhannisyan Its a bit of an odd scenario. I have a parent application from my company (which I do not have control over), which renders an iframe that contains my react application. Since the iframe lies outside my direct control I am trying to access it via the plain JS queryselector method.

const oldIframe: HTMLIFrameElement = document.querySelector(
        "#parent-application-iframe"
    ) as HTMLIFrameElement;
    
    if (oldIframe) {
        const parentNode = oldIframe.parentNode;
        const newIframe: HTMLIFrameElement = oldIframe.cloneNode() as HTMLIFrameElement;
        if (newIframe) {
            newIframe.src = "some/source";
        }
        if (parentNode) {
            parentNode.replaceChild(newIframe, oldIframe);
        }
    }

casting the object to an HTMLIFrameElement seems to solve the src issue. So far however, I have not been able to access the iframe in the first place when serving my application to the parent application. I'm not sure I am even able to as it may present a cross domain security issue.

[AleksandrHovhannisyan]

Ah, yeah, a type assertion should do the trick. Not sure about the other question. Sorry that I can't be of more help!

[solution-loisir]

I have not been able to access the iframe in the first place when serving my application to the parent application. I'm not sure I am even able to as it may present a cross domain security issue.

I'm not sure I fully understand and I might not even be on topic here, but there's a way to communicate between an host and a frame (and the other way around) with the window.postMessage() method which allows cross-origin. It's often used by applications that exposes iframe to embed in one website for exemple: https://www.amilia.com/scripts/amilia-iframe.js.

[Alessandro-Avallone-Developer]

Great! solved my problem

[poseneror]

I can't emphasis enough how grateful I am for stumbling across this one! We were struggling for days, scanning the internet for so long to understand why we get multiple entities in our history stack when navigating to specific pages on our app. Thank you so much!

[Maarondesigns]

Thank you! I was wondering what my issue was and this is it. Unfortunately for me I am not changing the source of the iframe from the parent app, but rather navigating inside the iframe and communicating with the parent via postMessage, so it sounds like my solution will be more complex, but hopefully not too bad.

[cannacavender]

Thank you so much for the detailed write up

[AnujK1Singh]

Thanks Very much for the detailed solution.

[jhxxs]

Thanks a lot.

[Pertempto]

Thank you!