могу ли я отображать пользовательский javascript в веб-приложении с потоковым освещением

#javascript #python #streamlit

Вопрос:

Я работаю над приложением для сбора данных о парковке, используя библиотеку Streamlit в python 3.7, я хочу отображать доступность парковочных мест с помощью пользовательского JavaScript для визуализации. Можно ли отображать элементы HTML/javascript в веб-приложении с потоковым освещением

Комментарии:

1. удачи. Вернитесь, когда получите сообщение об ошибке.

2. @furas Я спрашиваю, возможно ли это, я, кажется, ничего не нахожу об этом в потоковой документации.

3. затем проверьте исходный код.

4. используя Google streamlit add html , я нашел, как отобразить уже готовый html-код с потоковым освещением? который использует st.markdown(html_string, unsafe_allow_html=True) . Он думает, что вы могли бы использовать его для добавления HTML и JavaScript. Но в документации я нашел создание компонента Streamlit, и, возможно, это может быть более интересным.

Ответ №1:

Порывшись в Гугле, я нашел:

Вы можете добавить HTML с помощью

 import streamlit as st

st.markdown(html_string, unsafe_allow_html=True)
 

но это не может добавить JavaScript.

Форум: Как отобразить уже подготовленный html-код с помощью Streamlit?


Вы можете добавить 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 .

Смотрите видео в документе: Создание компонента с потоковым освещением