PostMessage Функция работает постоянно без посылаемого сообщения

Question

У меня есть IFRAME с формой в нем, и в этом IFRAME У меня есть следующие:

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

выше предполагается отправить сообщение в родительское окно когда форма отправлена.

В родительском окне У меня есть следующий:

function receiveMessage(event) { 

    var origin = event.origin; 

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

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

Проблема у меня, кажется, имея в том, что код на родительском окне сразу выполнение без посылаемого сообщения из формы IFrame представляются. Он также выполняется снова и снова. Он записывает «Представлено!» в консоли снова и снова, пока я позволяю ей работать.

Как эта функция может работать без отправки формы для отправки функции и почему она работает снова и снова?

Answer 1

В моем IFRAME я переехал postMessage() в сноске, и проверяется на DIV, который доступен только после того, как моя форма была отправлена. Если div существует, я отправляю сообщение в родительское окно. Это точный код в моем iframe.

// 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' 
    }, '*'); 

} 

На моем родительском окне я создал функцию, проверил домен сообщение исходит от, и проверяется на точное сообщение, посылаемой с if (event.data.event === 'formSubmit'). Если это сообщение, которое было отправлено только из моего iframe, если существовало подтверждение div div, совпало точно formSubmitted, то я нажал это событие на datalayer Диспетчера тегов Google. Это точный код, который теперь работает на моем сайте dev.

// 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); 

Приведенный выше код работает и запуская GTM тег правильно на родительской странице, когда форма представляется в IFRAME.

Answer 2

Вам необходимо проверить, что вы получили правильное сообщение.

function receiveMessage(event) { 
    if (event.origin !== 'https://iframe.domain') { 
    return; 
    } else if (event.data.event && event.data.event === 'submit') {  
    console.log('Submitted!'); 
    } 
} 

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

Я нахожу это странным, что вы получаете так много сообщений, и я хотел бы предложить добавить некоторый код, чтобы сбросить их в консоль, чтобы увидеть, что они есть.

window.addEventListener('message', (event) => console.log(event), false);