我可以在 streamlit 网络应用程序中显示自定义 javascript 吗

Question

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

Answer 1

深入挖掘 Google 我发现：

您可以使用

添加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

我可以在 streamlit 网络应用程序中显示自定义 javascript 吗

can I display custom javascript in streamlit web app

javascript

python

streamlit