Catch when Div innerHTML is updated by Javascript eventListener

@Blaceus wrote:

Hello there

I have an iframe in my app and have setup some custom Javascript that is an event-listener that throws whatever it finds into the innerHTML of a Div in my app.

I would like to be able to somehow “grab” this data so I can have my app react in certain ways when certain information.

For overviews sake, here is a screenshot of the app:

image1556×844 46.7 KB

Here is the javascript:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(e){
    if (e.origin !== "https://zingtree.com") {
        alert ("I did NOT see message comming from Zingtree, I have blocked it...");
    } else {
        document.getElementById("iframe-message").innerHTML += e.data;
    }
}

And here is the python script for the app:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)
server = app.server
app.config['suppress_callback_exceptions']=True
app.title = 'RFC Demo'

app.layout = html.Div(
    children=[
        html.Div(id='div-test'),
        html.Div(
            html.Iframe(id='iframe-test',src=f'https://zingtree.com/deploy/tree.php?z=embed&tree_id=TREE-ID',style={'width': '80%', 'height': '500px', 'sandbox': 'True'})
        ),
        html.Div(id='iframe-message')  
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

I have tried something simple like adding a callback like:

    Output('show-node', 'children'),
    [Input('iframe-message', 'children')])
def showNode(messageString):
    'do something smart here....'
    return

But it just gives me a None…

Any help how to somehow get out the information from the eventListener or innerHTML of html.Div(‘iframe-message’) is much appreciated! (Or to tell me if it is even possible…)

Posts: 2

Participants: 2

Read full topic