Support for communicating with trame when embedded in an <iframe />

[jourdain]

Trame let you create a full and complex application in plain python while skipping JavaScript all together.

But sometime, existing infrastructure, portal or website needs to expose/nest trame applications.
And for that using an <iframe /> tend to be the easiest way. But how to communicate between your trame Python application and your JavaScript front-end? Can you drive state from the outside or call Python methods?

Well now it is possible thanks to trame-iframe widget library. We have several examples illustrating various usage and configuration (JS/Trame, Trame/Trame, Trame/JS).

Q: How to make use of it?
A: First install the widget by calling pip install trame-iframe. Then you can do the following.

from trame.widgets import iframe

# ...

with layout: 
    comm = iframe.Communicator(
         event_names=["method_1", "method_2"], 
         method_1=ctrl.method1, 
         method_2=(ctrl.method2, "[$event]"),
    )
    ctrl.post_message = comm.post_message

# ...

Then in your JavaScript

// Update trame state
document.querySelector('iframe').contentWindow.postMessage({
   state: { a: 1, b: 2 },
}, '*')

// Call method 1
document.querySelector('iframe').contentWindow.postMessage({
   event: 'method-1',
}, '*')

// Call method 2
document.querySelector('iframe').contentWindow.postMessage({
   event: 'method-2',
   value: 'the arg',
}, '*')

Q: Can I have bidirectional communication?
A: Yes and you should look at that example for some ideas.

Enjoy!