I’m working on a Vaadin application that features a tabbed interface, where one of the tabs contains an IFrame. My goal is to ensure that the IFrame does not refresh its content when switching between tabs.
Currently there’s a Tabs component at the top and below it is the content area(a simple Div). The content to be added will only be instantiated if there’s no existing instance and will be added to the content area. When switched the existing content is removed and the content for the newly selected tab will be added. This way the content is persistent as in components retain their state. One of these tabs has an IFrame which shows a site but this refreshes every time I switch this is what I want to prevent.
Does anyone have suggestions on how to achieve this?
I guess you can do that by setting the content as hidden (using component.setVisible(false)) instead of removing it. You can maybe also use the TabSheet component (introduced in Vaadin 23.3) that does this automatically for you.
But it will stay in the DOM right that’s not really what I want. I have closing functionality and other stuff going on with the Tabs component so I avoided Tabsheet.
Check out Vaadin TabSheet implementation, specifically its private method updateContent.
They used Element.getNode().setEnabled(boolean). Seems like that this leads to hides the component in the client without calling the attach or detach listeners (at least perhaps one year ago). This improved the loading time of a tab significantly, but when switching back to a tab the content was not be refreshed (what we needed).
You may can add into your tabbed interface that depending on the specific component with interface or attribute as marker the tab switched with Element.getNode().setEnabled(false) instead of add and remove.
We did not had any IFrame. Maybe this is a Browser Renderer feature itself, when the IFrame has visibility changes.
The <iframe> element in the browser resets itself every time it’s attached to the DOM which means that there’s no way around the fact that you either have to keep it attached or accept that it’s refreshed.