の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要素をチェック。 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);