Aquí hay un ejemplo básico de lo que estoy trabajando:
https://codesandbox.io/s/peaceful-faraday-xl3kz0?file=/src/Tabs.js
import { Tab } from "@headlessui/react"; export default function Tabs() { return ( <Tab.Group> <Tab.List> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> <Tab>Tab 3</Tab> </Tab.List> <Tab.Panels> <Tab.Panel>Content 1</Tab.Panel> <Tab.Panel>Content 2</Tab.Panel> <Tab.Panel>{renderIframe()}</Tab.Panel> </Tab.Panels> </Tab.Group> ); function renderIframe() { return ( <iframe src="https://en.wikipedia.org/wiki/Main_Page" height="800px" width="800px" title="Example" loading="eager" ></iframe> ); } }Si hace clic en la pestaña 3, debería ver un iframe apuntando a Wikipedia. Sin embargo, si navega a otra página dentro del iframe ('Eventos actuales', por ejemplo), y luego hace clic en la pestaña 1 y luego en la pestaña 3 nuevamente, el iframe cargará la página de inicio de Wikipedia nuevamente. ¿Hay alguna manera de mantener el estado de este iframe para que, incluso después de cambiar de pestaña, sea exactamente igual que antes cuando vuelvo a la pestaña 3?
No parece que haya una forma estándar de hacerlo, a juzgar por esta respuesta , es posible que necesite un detector de eventos personalizado que almacene la última URL en la que se hizo clic en algún estado o una cookie (si desea persistir entre actualizaciones), luego en su iFrame que puedes hacer
src={lastUrl || 'https://en.wikipedia.org/wiki/Main_Page'}
Un enfoque alternativo podría ser jugar con el índice z para que la pestaña 3 nunca se elimine de la pantalla, sino que simplemente se quede en el fondo oculta por CSS (no lo he probado). Pero puede haber algunos problemas de rendimiento con este enfoque si funciona.