如何在Python Dash应用中实现Typed.js功能？

问题背景 #

尝试在Dash应用中使用Typed.js动态生成页面文本，但通过dash.html.Script、assets文件夹JS文件、grasia包等方法均未成功实现效果。

失败原因 #

Dash的组件渲染是异步的，直接执行Typed初始化代码时，目标DOM元素可能还未完成渲染，导致无法找到元素实例，初始化失败。

可行解决方案 #

方案1：使用Dash客户端回调监听页面加载 #

利用Dash的clientside_callback，在页面加载完成后再初始化Typed.js，确保目标元素已存在：

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

external_scripts = [
    'https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js',
]

app = dash.Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
    [
        html.H1(["Hello, ", html.Span("Dash", className="mov", id="mov"), "!"]),
        # 隐藏元素用于触发页面加载完成的回调
        html.Div(id='page-load-trigger', style={'display': 'none'})
    ]
)

# 客户端回调：页面加载完成后初始化Typed
clientside_callback(
    """
    function(n_clicks) {
        var typed = new Typed("#mov", {
            strings: ["for one", "for two", "for three"],
            typeSpeed: 150,
            backSpeed: 150,
            loop: true
        });
        return null;
    }
    """,
    Output('page-load-trigger', 'children'),
    Input('page-load-trigger', 'n_clicks'),
    prevent_initial_call=False  # 确保页面加载时自动执行
)

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

方案2：给Script标签添加defer属性 #

通过设置defer属性，让JS代码在DOM完全加载后再执行：

import dash
from dash import html

external_scripts = [
    'https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js',
]

app = dash.Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
    [
        html.H1(["Hello, ", html.Span("Dash", className="mov", id="mov"), "!"]),
        html.Script("""
            var typed = new Typed("#mov", {
                strings: ["for one", "for two", "for three"],
                typeSpeed: 150,
                backSpeed: 150,
                loop: true
            });
        """, defer=True)  # 添加defer属性
    ]
)

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

方案3：延迟执行初始化代码 #

通过setTimeout给DOM渲染留出时间，确保元素已存在：

import dash
from dash import html

external_scripts = [
    'https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js',
]

app = dash.Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
    [
        html.H1(["Hello, ", html.Span("Dash", className="mov", id="mov"), "!"]),
        html.Script("""
            setTimeout(function() {
                var typed = new Typed("#mov", {
                    strings: ["for one", "for two", "for three"],
                    typeSpeed: 150,
                    backSpeed: 150,
                    loop: true
                });
            }, 500);  # 延迟500毫秒执行
        """)
    ]
)

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

关键说明 #

• 核心问题是DOM元素渲染时机，Typed.js初始化必须在目标元素被渲染到页面之后执行。
• 方案1是最可靠的Dash原生方式，利用框架的生命周期确保时机正确；方案2和3是通用JS技巧，适合快速测试。

内容的提问来源于stack exchange，提问作者Ramon Ankersmit