javascript - 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') 发送的确切消息。如果该消息(仅在表单的确认 div 存在时从我的 iframe 发送)与 formSubscribed 完全匹配，那么我将该事件推送到 Google 跟踪代码管理器的数据层。这是现在在我的开发网站上运行的确切代码。

// 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 标记。