robbestad/react-iframe

onLoad function Safari support

Opened this issue · 2 comments

Hey there,
I'm intergrading an Iframe for a payment process and i'm displaying a spinner untill the Iframe has been loaded fully.
For some reason it doesn't support Safari browser, at which the spinner isn't going away after the page has been loaded.

{(iFrameLoading ) ? <Spinner/> : null} <Iframe src={text} width='350px' height='550px' styles={IframeStyle} url={text} onLoad={reDirect} scrolling='no' />

my onLoad function :
Here im using a counter to count the amount of redirects,one means redirecting the Iframe to the desired URL and second redirect means redircted from inside the Iframe.

const reDirect = async () => { setCount(count + 1) if (count === 1) { setIframeLoading(false) } }

I wonder, wouldn't it be easier to put the Spinner logic inside the iframe? In any case, I think you should use the postMessage API to handle communication with the parent of the iframe. Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

I wonder, wouldn't it be easier to put the Spinner logic inside the iframe? In any case, I think you should use the postMessage API to handle communication with the parent of the iframe. Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Hey man,
Thanks for the quick reply. Using the postMessage as i understood it, will include still using the onLoad function of the Iframe to send message to the parnet window.
If Safari didn't recognized the spinner from the onLoad function before i don't know if it will work now.
I will test it out and post the answer here soon.
Thanks for the help!