Использование 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", "*"); 
});