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到父级使用它，它的工作方式就像一种魅力，但是我无法使它反过来工作。

这是我的eventListener代码：

<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...

应该这样做！

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

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

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

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

postMessage从父级到iframe不起作用

1 个答案: