PostMessage를 기능 내가 그것을에서 양식 iframe이이

Question

전송되는 메시지없이 반복적으로 실행하고, 그 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

나는 바닥 글에 postMessage() 이동, 내 양식을 제출 한 후에 만 ​​사용할 수 있습니다 사업부에 대한 확인. 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')로 전송되는 정확한 메시지를 확인. 양식의 확인 div가있는 경우 iframe에서 보낸 메시지가 정확히 formSubmitted과 일치하면 이벤트를 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); 

위의 코드는 iframe에서 양식을 제출할 때 상위 페이지에서 올바르게 작동하고 GTM 태그를 올바르게 실행합니다.

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

나는 많은 메시지를 받고 있으며 콘솔에 덤프 할 코드를 추가하는 것이 좋습니다. 내 iframe에

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