Top-level links from a component iframe?

🧩 Streamlit Components
1

I am using URLs inside streamlit-aggrid table in order to redirect users to pages where they can manipulate an object selected from the table in specific ways.

By default the links open inside the component iframe, when I would like them to open full-sized in the same tab. I can redirect them to a new page with <a href=https://example.com _target="blank">Example</a>, but target="top" or target="parent" do not work at all.

Is this a Streamlit feature, perhaps some sort of security thing? Does anyone know how I could make these attributes work?

Thanks!

2

Hey @ennui,

Have you checked out this thread that seems to cover this issue?

I think you can do this with a HTML link and setting the link target . E.g.:

st.markdown('<a href="..." target="_self">...</a>', unsafe_allow_html=True)

But note that on Streamlit Cloud, this may not work perfectly in some cases. (The app is shown within an iframe on Streamlit Cloud and some websites can’t be opened within an iframe. That’s why we set the default link target to _blank in the first place so that the link always opens in a new tab.)

3

Hi Caroline,

Thank you for your suggestion. The _blank and _self targets work fine, but they are not what I need:

  • _blank opens a new tab
  • _self opens the link inside the component iframe

I am looking for the link to open at the level of the whole Streamlit interface (outside the component iframe). That would correspond to _top or _parent link targets. Links with those targets do not work at all.

Would you happen to know whether this is an intentional limitation of Streamlit components?

Edit: I am not sure if this maps 100% to how a component like st-aggrid would work, but consider the following reproducible example. For the external link (google.com), only _blank works; for the page link, only _blank and _self work, but _self opens the page inside an iframe so it is not very useful for navigating between pages.

.
├── app.py
└── pages
    └── page.py

app.py:

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

components.html(
    """
    <a href='https://google.com' target="_blank">Google _blank</a><br>
    <a href='https://google.com' target="_self">Google _self</a><br>
    <a href='https://google.com' target="_top">Google _top</a><br>
    <a href='https://google.com' target="_parent">Google _parent</a><br>
    """
)

components.html(
    """
    <a href='/page' target="_blank">page _blank</a><br>
    <a href='/page' target="_self">page _self</a><br>
    <a href='/page' target="_top">page _top</a><br>
    <a href='/page' target="_parent">page _parent</a><br>
    """
)

page.py:

import streamlit as st

st.write('Hello world')
1 Like
4

Hi @ennui I have the exact problem. Did you find a solution?

5

Hi @no_name no I did not. What is your use case? Personally I am using links inside a streamlit-aggrid table but I hope to transition to the standard dataframe API once this is released and only then see if I need to implement a custom solution.

6

My use case is using html and javascript to build a carousel component that previews texts, and links to the full texts. I just want the links not to open inside the iframe/html component but on the main tab of the streamlit app. Nothing works for now, except opening up in a new tab

7

I have the same issue,i made my streamlit-antd-components, and when i click a menu item,i want to link to the streamlit page,but _top or _parent not work,only _blank work,and _self will show refuse connection.