我可以在 Streamlit Web 应用程序中显示自定义 javascript

Question

我正在使用 python 3.7 中的 Streamlit 库开发停车数据应用程序，我想使用自定义 JavaScript 进行可视化显示停车位的可用性。是否可以在 Streamlit Web 应用程序中显示 HTML/javascript 元素

Answer 1

在谷歌中挖掘我发现：

您可以使用添加 HTML

import streamlit as st

st.markdown(html_string, unsafe_allow_html=True)

但这不能添加JavaScript。

论坛：如何使用 Streamlit 渲染已经准备好的 html 代码？

您可以使用以下命令添加 HTML 和 JavaScript

import streamlit.components.v1 as components

components.html(html_string)

但这把它放进去<iframe>

文档：组件 API 参考

最小工作示例

import streamlit as st
import streamlit.components.v1 as components

html_string = '''
<h1>HTML string in RED</h1>

<script language="javascript">
  document.querySelector("h1").style.color = "red";
  console.log("Streamlit runs JavaScript");
  alert("Streamlit runs JavaScript");
</script>
'''

components.html(html_string)  # JavaScript works

st.markdown(html_string, unsafe_allow_html=True)  # JavaScript doesn't work

要直接将 HTML 与 JavaScript 放在一起，您需要构建Component ，但似乎更复杂的方法，可能需要TypeScript.

请参阅文档中的视频：创建 Streamlit 组件