Die übergeordnete Seite und die untergeordnete Seite befinden sich in unterschiedlichen Domänen, und postMessage wird im Dialog zwischen ihnen verwendet. Im Folgenden werden sie der Einfachheit halber gemeinsam als Seiten F und C bezeichnet.
Das Klickereignis der Schaltfläche auf Seite C sendet eine kleine Nachricht C an Seite F. Seite F empfängt die kleine Nachricht C und führt die Logik-LC aus. Nachdem die LC-Ausführung abgeschlossen ist, sendet Seite F eine kleine Nachricht F an Seite C. Seite C empfängt die Nachricht klein F. Logisches LF ausführen. Kurz gesagt bedeutet dies, dass die Seiten F und C miteinander kommunizieren.
kann als
ähnlich der Eltern-Kind-Komponentenkommunikation in React betrachtet werden.
C-Seiten-JS-Code:
var btnObj = document.getElementById('buttons');
btnObj.onclick = function(){
var defaultAdData = {
type:'advert',
gameData:{
adId: '123'
}
};
window.parent.postMessage(JSON.stringify(defaultAdData), '*');
/*我是错误代码：
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "adGivePrize"&&datas.givePrize) {
alert(‘click’);
}
}
window.addEventListener("message", receiveMessage, false);*/
}
/*我是正确代码：
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "adGivePrize"&&datas.givePrize) {
alert(‘click’);
}
}
window.addEventListener("message", receiveMessage, false);*/
F-Seiten-JS-Code:
var receiveMessage = function(event) {
var datas = JSON.parse(event.data);
if (datas.type === "advert") {
var postIframeData = {
type:'adGivePrize',
givePrize:true
};
//iframe发送信息~~~~
window.frames[0].postMessage(JSON.stringify(postIframeData), '*');
}
}
window.addEventListener("message", receiveMessage, false);
Kurz gesagt, diese Methode ermöglicht die Kommunikation zwischen zwei unabhängigen Seiten, sodass externe Projekte oder eingebettete Iframes miteinander kommunizieren können.