postMessage 无法从父级到 iframe

Question

我正在尝试将 cookie 从我的父页面发送到 iframe。

这是我的 postMessage 代码：

<script>
  try {
    var postObject = JSON.stringify({
      event: 'DOMPageLoad',
      data: '{{Page URL}}'
    });
    parent.postMessage(postObject, 'https://mysite/l/839063/2020-02-26/29bh');
  } catch(e) {
    window.console && window.console.log(e);
  }
  </script>

我尝试从 iframe 到父级使用它，它就像一个魅力，但我无法让它以相反的方式工作。

这是我的事件监听器代码：

<script type="text/javascript">
(function(window) {

    addEvent(window, 'message', function(message) {
      try{
      var data = JSON.parse(message.data);
      var dataLayer = window.dataLayer || (window.dataLayer = []);
      if (data.event) {
        dataLayer.push({
          'event': data.event,
          'postMessageData': data
        });
      }
      }catch(e){}
    });

    // Cross-browser event listener
    function addEvent(el, evt, fn) {
      if (el.addEventListener) {
        el.addEventListener(evt, fn);
      } else if (el.attachEvent) {
        el.attachEvent('on' + evt, function(evt) {
          fn.call(el, evt);
        });
      } else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
        el['on' + evt] = function(evt) {
          fn.call(el, evt);
        };
      }
    }

  })(window);
</script>

我的假设是问题与我尝试将消息发送到 iframe 的方式有关。现在我正在使用parent.postMessage，但我认为 iframe 需要有所不同。

这可能很简单，但我对 javascript 很陌生，根本不知道我不知道什么。

Answer 1

我认为您对parent.postMessage 的问题是正确的。 parent 属性引用了当前框架的父框架，但在这里您想向子框架发布消息。

要访问iframe 的窗口，您首先需要以某种方式获取iframe。例如，如果你的iframe 有id="my-iframe"，你可以这样使用：

var myIframe = document.getElementById('my-iframe');

然后您可以使用contentWindow 属性访问iframe 的窗口：

myIframe.contentWindow.postMessage...

应该这样做！

附：我看到你有 data: '{{Page URL}}' 带引号，但我认为你不需要它们。如果我没记错的话，你应该可以使用data: {{Page URL}}。

---

编辑：选择正确的方式来触发代码

将此代码连接到 GTM 中的 All Pages 触发器可能会导致问题，因为在触发器触发时，iframe 不一定已加载。我认为这是您最好的两个选择：

• 等待iframe 告诉您它已准备就绪（可能是最佳选择）
  您可以向iframe 添加一些代码，以便在加载后立即向父级发布消息。当父母收到消息时，它可以将消息发送到iframe，并确保iframe 已准备好接收它。
• 使用 GTM 的 Window Loaded 触发器类型（容易修复，但不是很好）
  创建 GTM 触发器时，您将看到 Window Loaded 触发器类型。这只会在页面上的所有内容都加载后触发，包括任何iframes。如果您有任何大图像或其他任何东西，Window Loaded 事件可能会在您的 iframe 准备好之后触发，这只是浪费时间。