상위 페이지와 하위 페이지는 서로 다른 도메인에 있으며 둘 사이의 대화에는 postMessage가 사용됩니다. 이하에서는 편의상 F페이지와 C페이지로 통칭합니다.
페이지 C의 버튼 클릭 이벤트는 페이지 F에 작은 C 메시지를 보냅니다. 페이지 F는 메시지 작은 C를 수신하고 로직 LC를 실행합니다. LC 실행이 완료된 후 페이지 F는 페이지 C에 작은 F 메시지를 보냅니다. 페이지 C는 small F 메시지를 수신합니다. 논리적 LF를 실행합니다. 한마디로 F페이지와 C페이지가 서로 통신한다는 뜻이다.
는 React의 부모-자식 컴포넌트 통신과 유사하게
라고 생각하면 됩니다.
C 페이지 js 코드:
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 페이지 js 코드:
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);
간단히 말하면 이 방법은 관련되지 않은 두 페이지 간의 통신을 제공하므로 외부 프로젝트나 내장된 iframe이 서로 통신할 수 있습니다.