Here's a barebones example of what I'm working with:
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>
);
}
}
If you click on tab 3, you should see an iframe pointed at Wikipedia. However, if you navigate to another page within the iframe ('Current events', for example), and then click on tab 1, and then click on tab 3 again, the iframe will load the Wikipedia home page again. Is there a way for me to maintain the state of this iframe so that even after I change tabs, it's exactly the same as it was before when I go back to tab 3?
It doesn't look like there's a standard way of doing it, judging from this answer you may need a custom event listener that stores the last clicked url in some state or a cookie (if you want to persist between refreshes), then in your iFrame you can do
src={lastUrl || 'https://en.wikipedia.org/wiki/Main_Page'}
An alternative hacky approach could be to mess around with z-index so that tab 3 never actually is removed from the screen, but just sitting in the background hidden by CSS (haven't tested this). But there may be some performance concerns with this approach should it work.