postMessage（）の使用が受信されていません

Question

私は構文に問題があると確信していますが、iframeに変数を送信しようとしています（カラーボックス用）。当分の間、私は両端でドメインを受け入れている（ちょうどそれを働かせるために）。ここでは、送信ページのための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", "*"); 
});