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

【问题标题】：can I display custom javascript in streamlit web app我可以在 streamlit Web 应用程序中显示自定义 javascript
【发布时间】：2021-08-30 18:45:02
【问题描述】：

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

【问题讨论】：

祝你好运。收到错误消息时回来。
@furas 我问这是可能的，我似乎没有在 Streamlit 文档中找到任何关于它的信息。
然后检查源代码。
使用谷歌streamlit add html我发现How to render already prepared html code with Streamlit?使用st.markdown(html_string, unsafe_allow_html=True)。它认为您可以使用它来添加 HTML 和 JavaScript。但在文档中我找到了Create a Streamlit Component，也许这会更有趣。

标签： javascript python streamlit

【解决方案1】：

我在谷歌中挖掘：

您可以使用添加 HTML

import streamlit as st

st.markdown(html_string, unsafe_allow_html=True)

但这不能添加 JavaScript。

论坛：How to render already prepared html code with Streamlit?

您可以使用添加 HTML 和 JavaScript

import streamlit.components.v1 as components

components.html(html_string)

但这把它放在<iframe>

文档：Components API reference

最小的工作示例

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中的代码。

查看文档中的视频：Create a Streamlit Component

【讨论】：