使用postMessage（）没有收到

Question

我敢肯定这只是我的语法问题，但我试图发送一个变量到iframe（用于colorbox）。目前我接受任何两端的域名（只是为了让它工作）。下面是发送页面的JS：

$(document).ready(function() { 
if(window.location.hash) { 
    var urlimage = window.location.hash.substring(1); 
    targetiframe = document.getElementById('wbgallery').contentWindow; 
    targetiframe.postMessage(urlimage, "*"); 
    console.log(urlimage); 
} 
}); 

这里是接收页：

$(document).ready(function() {  
window.addEventListener('message',receiveMessage); 
console.log(event); 
function receiveMessage(event) { 
    if (origin !== "*") 
    return; 
    inbound = event.data; 
    console.log(inbound); 
} 
}); 

我看到控制台日志urlimage，可以看到入站事件，但没有。我使用Mozilla's explanation来尝试和全​​力以赴。

Answer 1

您正在加载iframe中的页面之前发送消息，因此message侦听器尚未建立。

您可以让iframe在准备就绪时向其发送消息，然后在此之后发送消息。

父代码：

$(document).ready(function() { 
    if (window.location.hash) { 
    var urlimage = window.location.hash.substring(1); 
    var targetiframe = document.getElementById('wbgallery').contentWindow; 
    $(window).on("message", function(e) { 
     targetiframe.postMessage(urlimage, "*"); 
     console.log(urlimage); 
    }); 
    } 
}); 

的iframe代码：

$(document).ready(function() { 
    $(window).on('message', function(event) { 
    inbound = event.data; 
    console.log(inbound); 
    }); 
    window.parent.postMessage("ready", "*"); 
});