postMessage Function runs repeatedly without a message being sent

Question

I have an iframe with a form in it, and in that iframe I have the following:

// Send a message to the parent window  
window.parent.postMessage({
    event: 'submit'
}, '*');

The above is supposed to send a message to the parent window when the form is submitted.

In the parent window I have the following:

function receiveMessage(event) {

    var origin = event.origin;

    if (origin !== 'https://iframe.domain') {
        return;
    } else {    
        console.log('Submitted!');
    }
}

window.addEventListener('message', receiveMessage, false);

The problem I seem to be having is that the code on the parent window is executing immediately without a message being sent from the iframe form being submitted. It is also executing over and over again. It logs "Submitted!" in the console over and over again for as long as I let it run.

How can this function run without the form being submitted to send the function, and why is it running over and over again?

Answer 1

In my iframe I moved the postMessage() to the footer, and checked for a div that is only available after my form is submitted. If the div exists I send a message to the parent window. This is the exact code in my iframe now.

// if the form has submitted and the confirmation message
// div exists send a messge to the parent window
if (jQuery('#gform_confirmation_wrapper_1').length) {   

    // Send a message to the parent window  
    parent.postMessage({
        event: 'formSubmit'
    }, '*');

}

On my parent window I created the function, checked the domain the message was coming from, and checked for the exact message being sent with if (event.data.event === 'formSubmit'). If that message, which was only sent from my iframe if the form's confirmation div existed, matched exactly formSubmitted then I pushed the event to the datalayer of Google Tag Manager. This is the exact code that is working on my dev site now.

// create function to push event to GTM if the iframe form has been submitted
function awReceiveMessage(event) {

    // set variable to url that the message is coming from 
    var origin = event.origin;

    // check if the message is coming from Polk 
    if (origin !== 'https://iframe.domain') {

        //stop function if it is not coming from Polk
        return;

    } else {

        // instantiating the GTM datalayer variable
        var dataLayer = window.dataLayer || (window.dataLayer = []);

        // if the message is formSubmit push the formSubmit event to the GTM datalayer
        if (event.data.event === 'formSubmit') {

            dataLayer.push({
                'event': 'formSubmit'
            });

        }

    }
}

// run awReceiveMessage() if a message is sent from the iframe to the parent
window.addEventListener('message', awReceiveMessage, false);

The above code is working and firing a GTM tag correctly on the parent page when the form is submitted in the iframe.