Dash - Change HTML.iframe element via function callback

Question

I've recently started a Dash application that shows up pre-registered HTML files that I show via HTML.iFrame :

html.Iframe(id = 'my-output', src = "assets/ABCD.html",
                style={"height": "495px", "width": "100%",})

and I've got a function/app callback, like the following:

@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value'),
    )

def update_output_div(input_value):
    return XYZ

Now I need that output value in my src, like this

html.Iframe(id = 'my-output', src = "assets/XYZ.html",
                style={"height": "495px", "width": "100%",})   

But i don't know how to get back that output value and change my src parameters.

Answer 1

You can make the src property an Output in your callback.

Example that uses a Dropdown as Input:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input

app = dash.Dash()
app.layout = html.Div(
    [
        html.Iframe(
            id="my-output",
            src="assets/ABCD.html",
            style={"height": "495px", "width": "100%"},
        ),
        dcc.Dropdown(
            id="input",
            options=[
                {"label": "ABCD", "value": "ABCD.html"},
                {"label": "XYZ", "value": "XYZ.html"},
            ],
            value="ABCD.html",
        ),
    ]
)


@app.callback(
    Output("my-output", "src"), Input("input", "value"), prevent_initial_call=True
)
def update_output_div(input_value):
    return f"assets/{input_value}"


if __name__ == "__main__":
    app.run_server()