HTML5 postMessage 사용자 매뉴얼

코딩할 때 다음과 같은 도메인 간 상황이 자주 발생합니다.

1. 페이지 내에 iframe 중첩 및 iframe을 사용한 메시징

2. 페이지 간 및 여러 페이지 간 메시지 전송

이러한 골치 아픈 도메인 간 문제에 대응하여 HTML5는 특별히 새로운 기능인 postMessage(문서 간 메시지 전송)를 출시했습니다. postMessage를 사용할 때 data와 OriginUrl이라는 두 가지 매개변수를 전달해야 합니다. Data는 전달해야 하는 내용을 의미하는데 일부 브라우저에서는 문자열 매개변수만 처리할 수 있기 때문에 일반적으로 데이터를 직렬화 즉 JSON.stringify()로 하고, OriginUrl은 대상 URL과 지정된 창을 참조합니다.

아래는 예입니다. 모든 사람이 이해하고 작성하는 것이 더 쉬울 것이라고 믿습니다.

1. 페이지 내에 중첩된 iframe

상위 페이지:

HTML:

 <div id='parent'>안녕하세요 포스트 메시지</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>

JS:

 window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) { console.log(e) document.getElementById('parent').style.color=e.data})

하위 페이지:

HTML:

 <div id='button' onclick='changeColor();' style=color:yellow>정보 수락</div>

JS:

 window.addEventListener('message',function(e){ console.log(e) let color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});functionchangeColor(){ letbuttonColor = document.getElementById('button').style.color ButtonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}

상위 페이지는 postMessage 메소드를 통해 iframe에 메시지를 전달하고, 하위 페이지는 window.addEventListener를 통해 메시지 메소드를 수신하여 상위 페이지에서 전달된 값을 얻습니다. 아래 그림과 같이 data는 상위 페이지에서 전달된 값입니다.

하위 페이지가 상위 페이지로 메시지를 전송할 때 window.parent.postMessage(data,url)를 통해 값을 전달하는 대신 postMessage 메서드를 통해 메시지도 전달합니다. 상위 페이지는 값을 가져올 때 메시지 이벤트도 수신합니다.

2. 여러 페이지 간에 메시지 전달

상위 페이지:

HTML:

 <div id='parent' onclick=postMessage()>안녕하세요 postMessage</div>

JS:

 let parent = document.getElementById('parent')function postMessage(){ let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }

하위 페이지:

HTML:

 <div id='button' onclick='changeColor();' style=color:#f00>정보 수락</div>

JS:

 window.addEventListener('message',function(e){ console.log(e) });

상위 페이지는 window.open을 통해 다른 페이지를 열라는 메시지를 하위 페이지에 보낸 후 값을 전달합니다. postMessage를 사용하여 값을 전송할 때 하위 페이지의 로딩이 한 번에 완료되지 않아 하위 페이지의 청취 이벤트가 발생하므로 setTimeout을 사용하여 메시지 전달을 지연시켜야 한다는 점에 유의해야 합니다. 아직 시작되지 않았으며 지금은 값을 받을 수 없습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.