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

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

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

Answer 2

在我的iframe中，我将<div id="job" data-job-id="3054>jobs status</div>移动到页脚，并检查了一个div，该div仅在提交表单后才可用。如果div存在，我向父窗口发送一条消息。这是我的iframe中的确切代码。

postMessage()

在我的父窗口中，我创建了该函数，检查了邮件来自的域，并检查了与// 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' }, '*'); }一起发送的确切消息。如果该邮件仅在表格确认div存在的情况下从我的iframe发送，则完全匹配if (event.data.event === 'formSubmit')，然后我将该事件推送到Google跟踪代码管理器的数据层。这是我的开发站点上正在运行的确切代码。

formSubmitted

当在iframe中提交表单时，上面的代码正在工作并在父页面上正确触发GTM标记。

postMessage函数重复运行而不发送消息

2 个答案: