Streamlit中调用JavaScript函数返回值始终为0，求正确语法

核心问题 #

你使用的st_javascript库无法直接捕获JS函数的return值，必须通过特定的消息传递机制将结果发送给Streamlit，否则会默认返回0。

正确语法示例 #

首先确保已安装依赖库：

pip install streamlit-javascript

修改JS代码，通过window.parent.postMessage传递结果：

from streamlit_javascript import st_javascript

# 正确写法：用postMessage封装结果传递给Streamlit
anonymous = st_javascript("""
    (() => {
        const returnValue = 2;
        // 必须按指定格式发送消息
        window.parent.postMessage({type: 'streamlit:javascript', value: returnValue}, '*');
    })()
""")

st.write(f"JavaScript returned: {anonymous}")

原理说明 #

st_javascript的底层逻辑依赖浏览器的postMessage API与Streamlit进行通信：

• 执行的JS代码必须主动将结果封装为包含type: 'streamlit:javascript'的对象，通过window.parent.postMessage发送
• 如果不执行这一步，库的回调函数无法捕获返回值，会默认返回0

异步场景示例（比如API请求） #

如果需要执行异步操作，确保在异步完成后发送消息：

result = st_javascript("""
    (async () => {
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const data = await res.json();
        window.parent.postMessage({type: 'streamlit:javascript', value: data}, '*');
    })()
""")

st.write("异步请求返回结果：", result)

内容的提问来源于stack exchange，提问作者Romero Azzalini