如何修复 Streamlit Python 集成中的 JavaScript 返回问题

使用 Streamlit 和 Python 解决 JavaScript 执行问题

此方法演示了使用 Streamlit 将 JavaScript 与 Python 集成以进行前端交互。

import streamlit as st  
from streamlit.components.v1 import html  

# Approach 1: Simple JS function to return a value  
def js_code():  
    return """  
    <script>   
        function returnNumber() {  
            return 2;  
        }  
        const result = returnNumber();  
        window.parent.postMessage(result, "*");  
    </script>   
    """  

# Displaying HTML + JS in Streamlit and capturing response  
response = st.empty()  
html(js_code(), height=0)  

# Using JavaScript listener to capture the returned value  
st.write("Waiting for JavaScript response...")  

# Listening for the message event from JavaScript  
@st.cache_data  
def listen_for_js_message(data):  
    response.write(f"JavaScript returned: {data}")  

使用双向通信构建模块化 Streamlit-JavaScript 集成

该版本通过错误处理和模块化后端+前端结构扩展了功能。

import streamlit as st  
from streamlit.components.v1 import html  
import json  

# JS function wrapped in modular code  
def js_function(value):  
    return f"""  
    <script>  
        function calculateDouble(input) {{  
            return input * 2;  
        }}  
        const result = calculateDouble({value});  
        window.parent.postMessage(result, "*");  
    </script>  
    """  

# Input validation and error handling  
try:  
    user_input = st.number_input("Enter a number", min_value=0)  
    if user_input:  
        html(js_function(user_input), height=0)  
except ValueError as e:  
    st.error(f"Invalid input: {e}")  

# JavaScript response handling  
def handle_js_response(data):  
    try:  
        result = json.loads(data)  
        st.success(f"JavaScript returned: {result}")  
    except Exception as e:  
        st.error(f"Failed to parse response: {e}")  

JavaScript 和 Streamlit 代码集成的单元测试

添加单元测试可确保 JavaScript 函数和 Streamlit 界面在多个环境中按预期运行。

import unittest  
from streamlit.testing import TestSession  

# Unit test for JavaScript output  
class TestJavaScriptIntegration(unittest.TestCase):  
    def test_js_output(self):  
        session = TestSession()  
        response = session.run(js_function(5))  
        self.assertEqual(response, 10, "Expected 10 as the JS function result.")  

# Unit test for Streamlit input handling  
    def test_invalid_input(self):  
        with self.assertRaises(ValueError):  
            js_function("invalid")  

# Execute the tests  
if __name__ == "__main__":  
    unittest.main()  

有关 Streamlit 和 JavaScript 集成的常见问题

1. 为什么我的 JavaScript 函数在 Streamlit 中总是返回 0？
2. 出现该问题的原因是 Streamlit 本身不支持 JavaScript 函数的直接返回值。你需要使用 window.parent.postMessage() 将值传回后端。
3. 我可以使用 Streamlit 通过 JavaScript 创建交互式仪表板吗？
4. 是的！ Streamlit 允许您通过以下方式嵌入 JavaScript html() 成分。这使得开发人员能够将 Python 逻辑与基于 JavaScript 的交互性相结合，以实现动态仪表板。
5. 的作用是什么 st.empty() 在提供的代码中？
6. st.empty() 在 Streamlit 应用程序中创建一个占位符，稍后可以使用 JavaScript 响应或其他内容动态更新该占位符。
7. 在将用户输入传递给 JavaScript 之前如何验证它们？
8. 你可以使用 st.number_input() 对于数值或 try-except 块来处理异常并确保仅传递有效的输入。
9. 我可以将第三方 JavaScript 库与 Streamlit 一起使用吗？
10. 是的，外部库例如 D3.js 或者 Chart.js 可以使用以下方式嵌入到 Streamlit 应用程序中 html() 组件，增强可视化功能。

关于 Streamlit-JavaScript 挑战的最终想法

在 Streamlit 中正确集成 JavaScript 函数需要对前后端通信有深入的了解。使用 html() 组件以及方法，例如 发布消息() 有助于绕过限制并实现两层之间的无缝数据交换。

除了故障排除之外，开发人员还应该通过合并单元测试和适当的输入验证来重点优化性能。这种方法不仅解决了技术问题，还使 Streamlit 应用程序对于现代 Web 应用程序中的各种用例更加高效、可扩展和交互。