我正在尝试将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很陌生,根本不知道我不知道什么。
答案 0 :(得分: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
已准备就绪。Window Loaded
触发类型(易于修复,但效果不佳)Window Loaded
触发器类型。仅在页面上的所有内容(包括所有iframe
)均已加载后才会触发。如果您有任何大图像或其他任何东西,Window Loaded
事件可能会在iframe
准备就绪后触发,这只是浪费时间。