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

Question

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

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

我有一个 function/app 回调，如下所示：

@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

您可以在回调中将 src 属性设为 Output。

将 Dropdown 用作 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()

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

Dash - Change HTML.iframe element via function callback

html

python

iframe

plotly-dash