react-reverse-portal icon indicating copy to clipboard operation
react-reverse-portal copied to clipboard

iframes reload from source

Open evanfrawley opened this issue 5 years ago • 7 comments

Hi! Really cool library, thanks for building it.

I've found though that if I use an iframe to render an embedded video, changing the parent will reload the embed from source each time. The actual source URL of the iframe doesn't matter. Do you have any idea why this might be the case?

evanfrawley avatar Aug 13 '20 20:08 evanfrawley

Unfortunately, this isn't a limitation of reverse portals, this is a limitation of the DOM itself: https://stackoverflow.com/a/8318401/68051.

As far as I can tell, the iframe is being moved around the DOM totally correctly, so the DOM node in the new location is the same as the old one, but iframes have unique behaviour where they reload every time they're moved in any way.

This isn't likely to be fixable, as its core browser behaviour, so the only way to move an iframe around the page without reloading is with CSS. Sorry about that! If you do find any ways to do this I'd love to hear about them. For now though, I'm going to assume this is impossible, so I'll close this issue.

pimterry avatar Aug 14 '20 08:08 pimterry

Thanks @pimterry for your insightful reply :) I'll keep poking around and see if I figure out something

evanfrawley avatar Aug 14 '20 21:08 evanfrawley

@evanfrawley did you discover anything? Struggling with getting my iframes not to reload currently.

wyhinton avatar Sep 24 '21 21:09 wyhinton

@wyhinton nope, we just didn't go down this road anymore

evanfrawley avatar Sep 24 '21 21:09 evanfrawley

@pimterry This is something that could definitely be included in the Important notes section of the documentation. I've spent about half a day setting up and trying to determine why this isn't working using an iframe.

ryanhartwig avatar May 03 '24 13:05 ryanhartwig

@ryanhartwig sure, good idea, I'd accept a PR for that if you're interested

pimterry avatar May 06 '24 09:05 pimterry

Chrome 133 (released yesterday) has a solution for this iframe problem! I'll reopen this issue now.

They've introduced a new moveBefore API that explicitly doesn't reload iframes: https://chromestatus.com/feature/5135990159835136. If we detect and use that when available then this problem will go away entirely.

PRs welcome if somebody has a minute to set this up and test it works as expected in Chrome 133. Looks like Safari & Firefox have shared positive signals on implementing this too, so eventually this will go away everywhere.

pimterry avatar Feb 05 '25 16:02 pimterry