Refreshing an iFrame within a Tab

Dash Python
1

I’m using an html.Iframe element to display a piece of generated src html code. It works fine, but the thing is, the iframe resides within one of two tabs. Now I have a callback which triggers the creation of a new Iframe based on user input, a date picker and a selected tab. This technically also works fine, the iframe does get updated, however it does not refresh itself inside an already open tab. First I thought that maybe it’s a Tab component thing but the inside of the Tab component does live refresh when there is no Iframe element in it but for example just text and such. Now I’ve tried multiple things but haven’t got any to work as I want. Here is a short code example of what I mean:

app.layout = html.Div([
    html.Link(href='/assets/custom.css', rel='stylesheet'),
    html.Div([dcc.Textarea(id="input-box"),
              html.Button("Submit", id="button-submit"),
              html.Div(dcc.DatePickerSingle(
                  id="document-date",
                  clearable=True,
                  with_portal=True,
                  date=datetime.now()
              ), id="datepicker")], id="leftside"),
    html.Div((dcc.Tabs(id="tabs", value='tab-1', children=[
        dcc.Tab(html.Div(id="tabs-content"), label='Tab1', value='tab-1'),
        dcc.Tab(label='Tab2', value='tab-2')
    ]))),
    html.Div(id="iframe-src", style={"display": "none"})
])


@app.callback(Output('iframe-src', 'children'),
              [Input('button-submit', "n_clicks"),
               Input('document-date', 'date')],
              [State('input-box', 'value')])
def store_iframe_src(n_clicks, doc_time, text):
    if text:
        return some_function_that_creates_iframe_src(text)


@app.callback(Output('tabs-content', 'children'),
              [Input("iframe-src", "children"),
               Input("tabs", "value")])
def fill_tabs(source, tab):
    if tab == "tab-1":
        return html.Iframe(src=source)

The only way to refresh what the Iframe looks like is to change the tab and change back to the needed tab.

So my question would be, how could I force refresh the Iframe inside a selected tab when the selected tab does not change?

Thanks in advance!

1 Like
2

Did you figure out how to refresh the iframe?

3

I just fixed this issue by assigning random ids to Iframe each time I want it to refresh.