Auto refresh an iframe inside streamlit?

🎈 Using Streamlit
,
1

Summary

Hello everybody!
I have an streamlit website that works really well, but I have to embed another website inside the sidebar using an iframe, so I use this code:

Steps to reproduce

Code snippet:

st.sidebar.markdown(f'<iframe src="https://www.meteoblue.com/en/weather/week/albuquerque_united-states_5454711/"></iframe>', unsafe_allow_html=True)

Expected behavior:

Because the external website updates everyday, I would like to see an updated iframe every day… But right now I see yesterday’s page inside the iframe.
If I open streamlit on a private/incognito window in any browser the iframe is updated, but that’s not an option, since everybody would need to login again.
Another way is (on Chrome) to right-click inside the iFrame and select ‘Reload frame’ from the context menu but the final user won’t even know that is needed.

This behavior happens at least in Chrome and Firefox.

Is there a way to update the website everytime I open it? Maybe some code to force update the iframe of the external page? a way to auto refresh an iframe inside streamlit after certain period?

Actual behavior:

The embed website (iframe) doesn’t refresh by itself, unless you use an incognito window or right-click on the iframe and select reload form the context menu.

P.S. in stack overflow they have this solution:

 <script>
 window.setInterval("reloadIFrame();", 3000);

 function reloadIFrame() {
  document.frames["frameNameHere"].location.reload();
 }
 </script>

But since we’re inside streamlit, is there a way to implement something like this?

2

Hi @mabusdogma

Streamlit has an iframe method that you can use from streamlit.components.v1 (see Streamlit Docs).

A code example that you can try (code from the above Streamlit Docs):

import streamlit as st
import streamlit.components.v1 as components

# embed streamlit docs in a streamlit app
components.iframe("https://docs.streamlit.io/en/latest")

Note: Replace https://docs.streamlit.io/en/latest with your URL

Hope this helps!

Best regards,
Chanin

4

Thanks a lot! This seems to work (I’ll check some days to be sure, but it looks like it updates everytime I refresh the browser)

Just in case you need to use it in the sidebar, and with a specific height (in my case is enough with 190):

with st.sidebar:
    components.iframe("https://whateveryouwant.com/", width=None, height=190, scrolling=False)
1 Like
6

Hi,

Glad to see that things are working out!

As for the app refresh, @kmcgrady made a custom component called Streamlit Autorefresh

GitHub repo of this component with code snippet here:

Best regards,
Chanin

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.