postMessage()를 사용하고 있지 않습니다.

Question

구문에 문제가있는 것 같지만 iframe에 변수를 보내려고합니다 (사용할 ColorBox 용). 당분간 나는 양쪽 도메인에서 도메인을 수락하고 있습니다.

$(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); 
} 
}); 

그리고 여기에 수신 페이지입니다 : 여기에 보내는 페이지에 대한 JS입니다

$(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을 준비 할 때 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", "*"); 
});