Streamlit中JavaScript向Python后端传递数据的简易方法

本文旨在介绍一种在streamlit应用中，从前端javascript（特别是通过iframe传递的）向python后端传递数据的简便方法。面对集成外部javascript组件时的数据交互需求，传统双向组件可能过于复杂。文章将重点讲解如何利用 `streamlit_javascript` 包，以简洁高效的方式实现javascript变量到python的传输，并通过一个认证令牌的实际案例进行演示。

Streamlit中JavaScript与Python后端通信的挑战

在Streamlit应用开发中，有时我们需要集成外部的JavaScript功能，例如通过 st.components.v1.iframe 嵌入一个独立的认证服务或其他交互式组件。这些外部组件或内联JavaScript可能会生成一些重要的值（例如认证令牌、用户输入等），而这些值需要被Streamlit的Python后端获取并处理。

以认证机制为例，一个常见的场景是：

1. 通过 st.components.v1.iframe 嵌入一个认证页面。
2. 认证页面（或其内部的JavaScript）在用户认证成功后，生成一个令牌。
3. 该令牌通过 parent.postMessage(token, '*') 发送给Streamlit应用的父窗口。
4. Streamlit应用的主页面中，通过JavaScript监听 message 事件，捕获并存储这个令牌，例如将其赋值给 parent.window.token。

from streamlit.components.v1 import html, iframe

# Streamlit应用中的JavaScript监听器，用于接收iframe发送的消息
html("""
<script>
    parent.window.addEventListener('message', e => {
        const key = e.message ? 'message' : 'data';
        const token = e[key];
        parent.window.token = token; // 将令牌存储在父窗口的全局变量中
    },false);
</script>
""")
iframe("RemoteIframeLocation") # 嵌入外部认证iframe

此时，令牌 parent.window.token 已经存在于浏览器前端的JavaScript环境中。然而，如何将这个前端JavaScript变量传递给Streamlit的Python后端，以便Python代码能基于此令牌进行用户授权或其他业务逻辑处理，成为了一个关键问题。

Streamlit官方提供了双向组件（bi-directional components）机制来解决JavaScript与Python之间的双向通信。但对于仅仅需要从JavaScript向Python传递一个简单值（如单个令牌）的场景，实现一个完整的双向组件可能显得过于复杂和繁琐。

立即学习“Java免费学习笔记（深入）”；

解决方案：利用 streamlit_javascript 实现数据桥接

针对上述问题，streamlit_javascript 包提供了一个极其简洁高效的解决方案。这个包允许你在Streamlit的Python代码中直接执行任意JavaScript代码，并获取其返回值。这使得从前端JavaScript环境“拉取”变量到Python后端成为可能。

网易人工智能

网易数帆多媒体智能生产力平台

39

查看详情

streamlit_javascript 的核心思想是利用Streamlit的自定义组件机制，但将其封装成一个易于使用的函数，让你无需深入了解组件的内部实现细节，就能执行JavaScript并获取结果。

实战示例：获取认证令牌

以下是如何使用 streamlit_javascript 来获取 parent.window.token 并将其传递给Python后端的示例代码：

from streamlit_javascript import st_javascript
import time
import streamlit as st

# 假设前面已经通过iframe和JS监听器将token设置到parent.window.token
# st.components.v1.html(...)
# st.components.v1.iframe(...)

st.title("认证令牌获取示例")

token = None
max_retries = 10 # 最大重试次数
retry_count = 0

while token is None and retry_count < max_retries:
    st.info(f"尝试获取认证令牌... (第 {retry_count + 1} 次)")
    # 执行JavaScript代码 'parent.window.token'，并获取其返回值
    # st_javascript 会阻塞Python执行，直到JS执行完成并返回结果
    token = st_javascript('parent.window.token')

    if token:
        st.success(f"成功获取令牌: {token[:10]}...") # 显示部分令牌，保护隐私
        break
    else:
        st.warning("令牌尚未准备好，等待中...")
        time.sleep(1) # 等待1秒后重试
        retry_count += 1

if token:
    st.write(f"在Python后端处理令牌: {token}")
    # 在这里可以进行令牌验证、用户授权等操作
    # 例如：if validate_token(token): st.write("用户已认证")
else:
    st.error("未能获取认证令牌，请检查认证流程或重试。")

代码解释：

1. from streamlit_javascript import st_javascript: 导入核心函数。
2. import time: 用于实现重试逻辑中的延迟。
3. while token is None and retry_count < max_retries:: 由于JavaScript代码的执行（尤其是 parent.postMessage 是异步的）以及Streamlit应用加载的顺序，parent.window.token 可能不会立即可用。因此，我们采用了一个简单的轮询（retry）机制来等待令牌的出现。
4. token = st_javascript('parent.window.token'): 这是关键一步。st_javascript 函数会指示浏览器执行 parent.window.token 这段JavaScript代码，并将其评估结果返回给Python变量 token。如果 parent.window.token 尚未定义或为 null，则 st_javascript 会返回 None。
5. time.sleep(1): 在每次尝试失败后，Python代码会暂停1秒，避免无限循环和资源浪费，给JavaScript足够的时间来设置令牌。
6. if token:: 一旦获取到令牌，循环终止，Python后端即可使用这个令牌进行后续处理。

注意事项与优化

• 异步性处理: 示例中的轮询机制虽然简单有效，但在某些复杂场景下可能不够优雅。更高级的优化可以在JavaScript端实现，例如使用 Promise 或 async/await 来等待令牌的到来，然后将最终结果传递给 st_javascript。然而，对于本例中直接读取全局变量的场景，简单的轮询通常已足够。
• 错误处理: 示例代码包含了一个最大重试次数的限制，以防止无限等待。在实际应用中，应根据业务需求设计更完善的错误处理和用户反馈机制。
• 适用场景: streamlit_javascript 非常适合于从前端获取简单、一次性的值。对于需要频繁双向通信、复杂数据结构传递或实时交互的场景，Streamlit官方的双向组件仍然是更强大和专业的选择。
• 安全性: 从前端获取的数据（如认证令牌）在后端进行处理时，务必进行严格的验证和消毒，以防潜在的安全漏洞。

总结

streamlit_javascript 包为Streamlit开发者提供了一个轻量级且高效的工具，用于解决从前端JavaScript向Python后端传递简单值的需求。通过一个简洁的函数调用，开发者可以轻松地获取浏览器环境中JavaScript变量的值，从而将前端交互与后端业务逻辑无缝连接。在面对需要集成外部JavaScript组件，但又不想引入复杂双向组件的场景时，streamlit_javascript 无疑是一个值得推荐的解决方案。

以上就是Streamlit中JavaScript向Python后端传递数据的简易方法的详细内容，更多请关注php中文网其它相关文章！