Hi, i have a short line of JS that i want to inject into the html page.
I am able to easely inject the HTML inside, but for some reason the JS part is not showing:
this is what im injecting:
<button id="close_error" type="button" class="close-error-btn" onclick="document.getElementById('loader-block').style.display = 'none'">
X
</button>
this is what im getting in the DOM:
<button id="close_error" type="button" class="close-error-btn">
X
</button>
as you can see the onclick is dissapearing
I also tried using it just as a script, and it does show, but does not work, meaning that on click does nothing…
Can you share a bit more of the code, like how do you inject the code and what the onclick loader-block ID is supposed to be?
If you are using st.markdown with unsafe_allow_html then all Javascript is unfortunately being stripped away.
Natively, you’ll have to use components.html, and you onclick behavior will probably need to leave the iframe to impact Streamlit components on the page, like showcased here
If doing it the native way is a bit too cumbersome, @Probability 's hydralit-components also has an experimental feature for injecting HTML/JS you should try, but you’ll probably get the same iframe problem if your loader-block ID is outside the component iframe.
So I guess the final answer would depend on like the rest of the code
Yeah, unfortunatly the only options are to actually inject iframes, which for some reason do not work, i tried to work it around with parent iframe, but it also does not work…
I got a custom message component that runs on error, kind of a wrapper.
I want to add a close button to it, to hide it on click.
now i want to attach to it close functionality using JS, but i tried everything i could find, and nothing works, Iframes are also not working, because of cross origin…
How it works?
The JS is loaded inside an iframe as you all know I assume (the html method).
The js searched for the parent item in the page (the one where the iframe is aka the one where the component is) and then the JS adds a listener to the element.