Spaces:
Sleeping
Sleeping
File size: 2,849 Bytes
9d6ac78 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import streamlit as st
# Define the JavaScript to be embedded
javascript_code = """
<script>
function myJavaScriptFunction() {
// Function to return a string
return "Hello from JavaScript!";
}
// Function to be called on button click; uses window.alert to display the return value
function callAndCapture() {
const result = myJavaScriptFunction();
// Use Streamlit's via the streamlit:component event to send data back to Python
window.parent.postMessage({isStreamlitMessage: true, type: 'streamlit:component', data: result}, '*');
}
// Add an event listener to handle messages from the iframe or parent window.
window.addEventListener('message', function(event) {
if (event.data.type === 'streamlit:buttonClick') {
callAndCapture();
}
});
</script>
<button onclick="callAndCapture()">Run JavaScript Function</button>
"""
# Create a container for HTML/JS script
html_container = st.empty()
html_container.html(javascript_code + "<div id='returned_value'></div>", height=300)
# Create a placeholder message
message_placeholder = st.empty()
# Add a button in Streamlit to send a message to the iframe to call JavaScript
if st.button("Call JavaScript Function"):
js = """
<script>
window.parent.postMessage({type: "streamlit:buttonClick"}, "*");
</script>
"""
html_container.html(javascript_code + js + "<div id='returned_value'></div>", height=300)
# Future-proofing to listen for messages from the JavaScript side
if "js_result" not in st.session_state:
st.session_state["js_result"] = ""
# Handle messages from JavaScript
st.markdown(
"""
<script>
window.addEventListener('message', (event) => {
if (event.data && event.data.isStreamlitMessage) {
const result = event.data.data;
// Reflect the result back to the Python script
window.parent.postMessage({type: 'streamlit:component_with_result', data: result}, '*');
}
});
</script>
""",
unsafe_allow_html=True,
)
# Python-side listener to write the result to the placeholder
try:
import streamlit.components.v1 as components
messages = components.html(
"""
<script>
window.addEventListener('message', (event) => {
if (event.data.type === 'streamlit:component_with_result') {
window.parent.postMessage(event.data.data, '*');
}
});
</script>
""",
height=0,
)
if_messages_received = messages._deserialize()
if if_messages_received and if_messages_received != st.session_state["js_result"]:
st.session_state["js_result"] = if_messages_received
message_placeholder.markdown("_" + if_messages_received + "_")
except:
pass
st.session_state["js_result"] |