postMessage() Method

I have a Webflow website that is embedded within another website in an iframe. The iframe embed works correctly. In webflow I have added a postMessage() method that has the purpose of sending a message to the parent window when a user clicks a button. The code which is placed in the Head code is posted below:

window.onload = function() {

  var loginButtons = document.querySelectorAll('[data-custom-action="login"]');
    
    for (var i = 0; i < loginButtons.length; i++) {
        var button = loginButtons[i];
        button.onclick = function() {
            window.postMessage({ route: 'login' });
          console.log('login');
        }
    }
}

When testing, the console.log operates correctly when the button with the ‘login’ attribute is clicked. However, the parent window doesn’t receive the postMessage.

Are there any ideas of what is going wrong?

Many thanks.

Sounds like a security issue. Try adding the target origin to your postMessage.

e.g.

window.parent.postMessage({ route: 'login' }, 'https://parent-website.com');