本文旨在介绍一种在streamlit应用中，从前端javascript（特别是通过iframe传递的）向python后端传递数据的简便方法。面对集成外部javascript组件时的数据交互需求，传统双向组件可能过于复杂。文章将重点讲解如何利用 `streamlit_javascript` 包，以简洁高效的方式实现javascript变量到python的传输，并通过一个认证令牌的实际案例进行演示。
Streamlit中JavaScript与Python后端通信的挑战
在Streamlit应用开发中，有时我们需要集成外部的JavaScript功能，例如通过 st.components.v1.iframe 嵌入一个独立的认证服务或其他交互式组件。这些外部组件或内联JavaScript可能会生成一些重要的值（例如认证令牌、用户输入等），而这些值需要被Streamlit的Python后端获取并处理。
以认证机制为例，一个常见的场景是：
通过 st.components.v1.iframe 嵌入一个认证页面。认证页面（或其内部的JavaScript）在用户认证成功后，生成一个令牌。该令牌通过 parent.postMessage(token, ‘*’) 发送给Streamlit应用的父窗口。Streamlit应用的主页面中，通过JavaScript监听 message 事件，捕获并存储这个令牌，例如将其赋值给 parent.window.token。
from streamlit.components.v1 import html, iframe# Streamlit应用中的JavaScript监听器，用于接收iframe发送的消息html(""" parent.window.addEventListener('message', e => { const key = e.message ? 'message' : 'data'; const token = e[key]; parent.window.token = token; // 将令牌存储在父窗口的全局变量中 },false);""")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后端成为可能。
streamlit_javascript 的核心思想是利用Streamlit的自定义组件机制，但将其封装成一个易于使用的函数，让你无需深入了解组件的内部实现细节，就能执行JavaScript并获取结果。
实战示例：获取认证令牌
以下是如何使用 streamlit_javascript 来获取 parent.window.token 并将其传递给Python后端的示例代码：
from streamlit_javascript import st_javascriptimport timeimport streamlit as st# 假设前面已经通过iframe和JS监听器将token设置到parent.window.token# st.components.v1.html(...)# st.components.v1.iframe(...)st.title("认证令牌获取示例")token = Nonemax_retries = 10 # 最大重试次数retry_count = 0while 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 += 1if token: st.write(f"在Python后端处理令牌: {token}") # 在这里可以进行令牌验证、用户授权等操作 # 例如：if validate_token(token): st.write("用户已认证")else: st.error("未能获取认证令牌，请检查认证流程或重试。")
代码解释：
from streamlit_javascript import st_javascript: 导入核心函数。import time: 用于实现重试逻辑中的延迟。while token is None and retry_count : 由于JavaScript代码的执行（尤其是 parent.postMessage 是异步的）以及Streamlit应用加载的顺序，parent.window.token 可能不会立即可用。因此，我们采用了一个简单的轮询（retry）机制来等待令牌的出现。token = st_javascript(‘parent.window.token’): 这是关键一步。st_javascript 函数会指示浏览器执行 parent.window.token 这段JavaScript代码，并将其评估结果返回给Python变量 token。如果 parent.window.token 尚未定义或为 null，则 st_javascript 会返回 None。time.sleep(1): 在每次尝试失败后，Python代码会暂停1秒，避免无限循环和资源浪费，给JavaScript足够的时间来设置令牌。if token:: 一旦获取到令牌，循环终止，Python后端即可使用这个令牌进行后续处理。
注意事项与优化
异步性处理: 示例中的轮询机制虽然简单有效，但在某些复杂场景下可能不够优雅。更高级的优化可以在JavaScript端实现，例如使用 Promise 或 async/await 来等待令牌的到来，然后将最终结果传递给 st_javascript。然而，对于本例中直接读取全局变量的场景，简单的轮询通常已足够。错误处理: 示例代码包含了一个最大重试次数的限制，以防止无限等待。在实际应用中，应根据业务需求设计更完善的错误处理和用户反馈机制。适用场景: streamlit_javascript 非常适合于从前端获取简单、一次性的值。对于需要频繁双向通信、复杂数据结构传递或实时交互的场景，Streamlit官方的双向组件仍然是更强大和专业的选择。安全性: 从前端获取的数据（如认证令牌）在后端进行处理时，务必进行严格的验证和消毒，以防潜在的安全漏洞。
总结
streamlit_javascript 包为Streamlit开发者提供了一个轻量级且高效的工具，用于解决从前端JavaScript向Python后端传递简单值的需求。通过一个简洁的函数调用，开发者可以轻松地获取浏览器环境中JavaScript变量的值，从而将前端交互与后端业务逻辑无缝连接。在面对需要集成外部JavaScript组件，但又不想引入复杂双向组件的场景时，streamlit_javascript 无疑是一个值得推荐的解决方案。
以上就是Streamlit中JavaScript向Python后端传递数据的简易方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534040.html
微信扫一扫 
支付宝扫一扫 
