Does ReadyMag support 'postMessage' API?

Custom code
1

Experimenting with having one custom code widget send a message to another using ‘postMessage’ API with no luck. Anyone know if this is supported?

Widget 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget 1</title>
</head>
<body>
    <h1>Widget 1</h1>

    <!-- Button that triggers the message sending function -->
    <button id="sendButton">Send Message to Widget 2</button>

    <script>
        function sendMessageToWidget2(message) {
            try {
                window.parent.postMessage(message, 'https://my-ready-mag-domain.com');
            } catch (error) {
                console.error('Error sending message:', error);
            }
        }

        // Example: Send a message when the button is clicked
        document.getElementById('sendButton').addEventListener('click', function() {
            sendMessageToWidget2('Hello from Widget 1!');
        });
    </script>
</body>
</html>

Widget 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget 2</title>
</head>
<body>
    <h1>Widget 2</h1>
    <div id="messageContainer"></div>

    <script>
        // Listen for messages from Widget 1
        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://my-ready-mag-domain.com') return; 

            // Display the received message
            var messageContainer = document.getElementById('messageContainer');
            messageContainer.innerHTML = 'Message received in Widget 2: ' + event.data;
        });
    </script>
</body>
</html>
2

Got things to work using shared variables instead. All good!

1 Like