Dash - 通过函数回调更改 HTML.iframe 元素

Question

我最近启动了一个 Dash 应用程序，它显示我通过 HTML.iFrame 显示的预先注册的 HTML 文件：

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

我有一个函数/应用程序回调，如下所示：

@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

现在我需要在 src 中输出该输出值，如下所示

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

但我不知道如何取回该输出值并更改我的 src 参数。

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()