Links

Communicating through the Iframe component

If you have a website or application embedded in the UI Bakery iframe component and you need to communicate with it (send or receive data) you can easily do this using the JavaScript `postMessage` function.
  1. 1.
    To send the data, give the Iframe component a unique name. This name will be added as a component class allowing you to query it with JavaScript:
2. Create a Code action and put the following code to query the iframe and send messages to it:
const iframe = document.querySelector('.uniqueName > iframe').contentWindow;
iframe.postMessage('message', { foo: 'bar' })
Depending on the receiving app configuration, postMessage may require additional setup.
In a similar manner, you can subscribe to events from the iframe:
const iframe = document.querySelector('.uniqueName > iframe').contentWindow;
iframe.on('message', (data) => {
console.log(data);
});
Add this action to the On Page load event to bind the listener to the new messages when the app loads.