Passing a postMessage to an iframe

Using Streamlit
1

Hi guys,

When I run the code below in console from the ‘top’ of the page, it has it’s intended effect: The embedded PDF viewer pdf.js zooms in.
This is being accomplished by an event listener in viewer.html waiting to hear “zoomIn” It then executes the api command for the viewer to zoom in.

Problem is, when I try to replicate this behavior using st.components nothing happens. Only alert1 fires, so for whatever reason the rest of the code seems to not be going off. Any idea what I’m doing wrong?

st.components.v1.html('''                      
           <script>
            alert("Alert 1");
            var nestedIframe = window.frames[0].frames[0];
            nestedIframe.postMessage("zoomIn", "*");
            alert("Alert 2");
            </script>
                ''')
2

Having the exact same issue, the alert will fire, but the postMessage seemed to be eaten up by something.

I also tried the following, another way to run JavaScript, the same thing happens

def post_message_to_iframe(message):
   
    my_js = f"""
    window.parent.postMessage("hello", "*");
    """

    my_html = f"<script>{my_js}</script>"
    html(my_html)
    

if st.button("Send messsage"):
    post_message_to_iframe("Hello world!")
3

Did anyone find a solution to this? i got the exact same error trying to post from child iframe to parent window… Alerts and console.logs before the postMessage are executed, but the postMessage never appears in the parent window…

Would really appreciate any help with this issue.

4

Hi guys,
I never actually found a solution to this. I was just using the ‘zoom in’ as a way to test the functionality of passing commands to PDF.JS and my real goal was to pass a string to search within the document.

I eventually ended up accomplishing passing the search string to the document on the end of the URL for where the PDF.JS is hosted which is in AWS. I think you can pass zoom in commands and such through the URL too. Happy to hop on the phone and discuss any of this with anyone, just send me a DM and we can chat.

My app is live at www.guidelinegopher.com

1 Like
5

Yeah passing over the URL i am doing for subscription management, but it is not a possibility for this message.

Thanks a lot for checking back and letting us know!!

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.