Javascript postMessage函数在不发送消息的情况下重复运行

我有一个带有表单的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);

在提交表单时，上面的命令应该向父窗口发送一条消息

在父窗口中，我有以下内容：

// 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表单发送消息。它也在一次又一次地执行。只要我让它运行，它就会在控制台中反复记录“Submitted！”

---

如果不提交表单来发送函数，该函数如何运行？为什么它会一次又一次地运行？

您需要检查是否收到了正确的消息

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

---

您需要检查是否收到了正确的信息

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

---

在我的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发送的消息与

formSubmitted

完全匹配，那么我将事件推送到googletagmanager的数据层。这正是我的开发站点上正在运行的代码

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

在我的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发送的消息与

formSubmitted

完全匹配，那么我将事件推送到googletagmanager的数据层。这正是我的开发站点上正在运行的代码

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

您可以复制吗？好的，我想可以。你知道如何查看所有发布的消息，或者如何过滤掉它们吗？我没有其他明确编码的消息事件。这就是我觉得奇怪的部分原因。让我们来看看。你可以复制吗？好的，我想是的。你知道如何查看所有发布的消息，或者如何过滤掉它们吗？我没有其他明确编码的消息事件。这就是为什么我觉得这很奇怪的一部分原因。让我们来看看。根据讨论线索（）和你的答案，我已经成功地实现了这一点。我也将发布一个答案，并对你的答案进行了投票。谢谢根据讨论线索（）和你的回答，我已经成功地实现了这一点。我也将发布一个答案，并对你的答案进行了投票。谢谢