iFrame widget content reloads when changing views

[rafaellehmkuhl]

Reported by @rjehangir:

It would be cool if the iframe could maintain a session even if you change the view and come back. Right now it reloads the page every time.

[JoaoMario109]

The issue with the iFrame reloading, even though the component is not "unmounted" in Vue, is probably related to how widgets are rendered on the screen in this code. This results in the widget being either removed or moved in the real browser DOM. According to information in these links:

• Microsoft Documentation
• Stack Overflow Discussion

So it seems that it is impossible to move or remove an iFrame in the real browser DOM without it being freed and recreated, causing the unwanted reload. A simple test for this is to set all lifecycle hooks in Vue and print debug messages for these events. Use a YouTube video in an iFrame, and when switching views, observe that the hooks are not called, but the video stops and reloads when returning to the original view containing the iFrame. This implies that the iFrame is being removed and freed under the hood in the real browser DOM.

So to address this we will likely need to handle iFrame widgets specially by ensuring they reside in a separate parent element that never removes or moves them, and we just control their visibility and positions.

[rafaellehmkuhl]

More on that on the whatwg repo.