使用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", "*"); 
});