如何通过Dash回调更新浏览器标签页的页面标题

要实现实时更新浏览器标签页标题，核心是直接操作HTML <head> 里的 <title> 元素——普通Dash组件回调做不到这一点，得用**客户端回调（clientside_callback）**直接在浏览器端执行JS代码来修改标题。

完整实现代码 #

from dash import Dash, html, dcc, Input, Output, clientside_callback

app = Dash(__name__)

app.layout = html.Div([
    # 用于输入新标题的触发组件
    dcc.Input(
        id='title-input',
        placeholder='输入新标签页标题...',
        type='text',
        value='默认标题'
    ),
    # 隐藏占位元素（Dash回调必须有输出项，这个元素不影响页面显示）
    html.Div(id='hidden-output', style={'display': 'none'})
])

# 客户端回调：直接在浏览器端修改标签页标题
clientside_callback(
    """
    function(new_title) {
        // 将输入值设为标签页标题，为空时 fallback 到默认值
        document.title = new_title || '默认标题';
        return ''; // 返回空值给隐藏元素，无实际作用
    }
    """,
    Output('hidden-output', 'children'),  # 绑定到隐藏元素作为输出占位
    Input('title-input', 'value')          # 监听输入框内容变化
)

if __name__ == '__main__':
    app.run_server(debug=True)

关键说明 #

• 客户端回调的JS逻辑直接访问document.title，这就是浏览器标签页显示的标题（对应HTML <head> 里的<title>元素），不需要给它加ID就能直接修改。
• 必须绑定一个输出项（这里用隐藏div），因为Dash的回调规则要求输入和输出配对，这个隐藏元素不会对页面视觉产生任何影响。
• 触发源可以换成任意组件（比如下拉框、按钮点击结果等），只需修改Input对应的组件ID和属性即可。

内容的提问来源于stack exchange，提问作者Prof Lupin