Material Calculators - Demo

This is a demonstration of communication between a parent page (e.g., a PDP) and an embedded calculator component inside an <iframe> element. Communication is achieved using Window.postMessage().

See above how quantity changes based on calculations inside the <iframe> element.

The <iframe> element dispatches a message using the Window.postMessage() method. The parent page creates a message event listener in the following way:

window.addEventListener('message', (event) => {
    /* callback logic */
});

See the implementation in index.js.