Tab showing same iframes in Tab Panes

Hi Everyone

I have have created Tab and embedded in each tab pane a HTML embed with different iframes.

All similar URL’s bar the 1x Number at the end, finishing with 1,2,4, and 3 for the different live fitness timetables. (For the published staging site, just started with the first 2, to simplify my issue)

Below is the first and second:

When I check these different 2x URL’s on a browser, all working well, displaying different content.

However, when I embed these on the embed element in the tabs (all browsers), they seem to be caching at a guess, and showing the same content on the different tabs. I have tried renaming various classes and ID’s on the HTML Element, the Parent Div’s of the HTML element and Tab Panes, however no joy. Can anyone advise on this?

Below is my shared link and any advice on this, would be fantastic.

surge.brandpartner.io/timetables/group-fitness-timetables

Here is: my Shared Link

https://preview.webflow.com/preview/surge-fitness?utm_medium=preview_link&utm_source=dashboard&utm_content=surge-fitness&preview=ddcb910a2e25ba99b7189a28acd44dcf&workflow=preview

Many thanks everyone.

Regards Saff.

Mmm, iframe caching fun.

Try adding a unique name attribute to each of the iframes, some browsers appear handle caching properly when the names are unique.

Beyond that you’ll need to do some research on other ways to prevent the browser from caching.
A quick search and I came across this reference;

Hi Michael

Thank you for that. Can you elaborate please on the name attribute? Can you show me a screen shot maybe of what you mean?

I really can’t add anything further to what’s already in the SO link I shared. Just try adding name=“x” and name=“y” to your iframe elements as attributes and see if the browser distinguishes the caching properly.

If not, you’ll need to go deeper. There are several approaches people are using in the article I shared.

Hi Michael

So you mean like this screen shot here below? is that what you mean?

Thank you for your time.

Below is what you shared.
The red box I’ve added contains an attribute.

If you read the link I sent you, it shows you examples of adding a name="whatever" attribute to help some browsers differentiate between the IFRAMEs and avoid caching.

If you want to try that reported solution, you’ll need to edit your iframe HTML to add it, wherever you have that. Most likely, it’s inside an HTML embed.

Hi Michael

Many thanks for your help. I will try that and see how we go. Thank you again.

Thanks Michael for the response. Yes unfortunately didn’t work. Still Caching.

I think I’m going to have to resort to putting the tables on different pages, hopefully that will work.

Thank you again Michael, much appreciated.