이 기사의 내용은 HTML5에서 postMessage의 크로스 도메인 구현에 대한 코드 분석에 관한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.
많은 사람들이 H5를 사용하여 크로스 도메인을 달성하는 것에 대해 어느 정도 이해하고 있습니다. 우리는 postMessage가 메시지를 보내는 데 사용되고 onMessage가 메시지를 받는 데 사용된다는 것을 알고 있지만 어떤 메서드를 window를 사용하여 호출해야 하는지, 어떤 메서드를 iframe의 contentWindow를 사용하여 호출해야 하는지는 명확하지 않습니다. 다음은 도메인 간 로컬 구현을 구현하기 위해 만든 작은 데모입니다. 이 예제는 github에서 다운로드할 수 있습니다. 실행하려면 먼저 컴퓨터의 호스트 파일을 찾아 127.0.0.1 localhost 아래에 다음 코드를 추가해야 합니다.
127.0.0.1 localhost 127.0.0.1 main.com 127.0.0.1 A.com 127.0.0.1 B.com
그런 다음 Apache 등의 서버를 시작하고 html 세 개를 넣어야 합니다. github에서 다운로드한 파일을 서버에 저장하세요. 마지막으로 도메인 간에 통신하려면 http://main.com:포트 번호만 방문하면 됩니다.
세 개의 HTML 파일 간의 관계는 다음과 같습니다: 세 개의 도메인: http://main.com:8090; http://a.com:8090; 메인 페이지 maindomain.html은 main.com에 있고 두 개의 iframe(subAdomain.html, subBdomain.html) 각각 a.com, b.com . maindomain.html에서 텍스트 영역에 메시지를 입력하고 iframe으로 보내기 버튼을 클릭하여 지정된 iframe으로 메시지를 보냅니다. (subAdomain.html 또는 subBdomain.html), ifame에서 maindomain.html로 메시지를 보낼 수도 있으며, 동시에 iname 메시지 수신에 대한 수신 메시지도 있습니다.
이는 웹사이트의 공개 리소스를 특정 하위 도메인에 배치하고 다른 하위 도메인은 이 하위 도메인의 리소스에 액세스해야 하는 매우 일반적인 시나리오입니다. 달성된 효과는 다음과 같습니다.
1. 영수증이 없는 정보:
2. 영수증이 있는 정보:
기본 지식
먼저 onMessage 이벤트에서 이벤트의 몇 가지 속성을 소개합니다. 이를 이해하면 제 예를 이해하기가 더 쉽습니다.
* 데이터: 들어오는 데이터
* 출처: 메시지를 보내는 문서가 위치한 도메인
* 소스: 메시지를 보내는 문서의 창 개체의 프록시
하위 도메인 X에 있는 메시지를 하위 도메인으로 보내려는 경우 Y, 필요합니다. 하위 도메인 X의 html 파일에서 Y(iframe의 contentWindow)의 창 개체를 얻은 다음 postMessage(message,
Y가 위치한 도메인) 동시에 하위 도메인 Y의 html 파일에서 onMessage를 사용하여 창 개체 메시지 이벤트를 수신합니다. 물론 onMessage에서 다시 postMessage를 사용하여 하위 도메인 X에 영수증 메시지를 보낼 수 있습니다. 우리가 종종 혼동하는 것은 postMessage를 호출할 도메인의 창 개체입니다.
code
main.com
<h1>This is the main domain</h1>
<div style="margin:0 20px;">
<textarea name="main" cols="80" rows="5"></textarea><br/>
<input type="button" value="send to iframe A"/>
<input type="button" value="send to iframe B"/>
</div>
<div style="float:left; margin:0 20px;">
<h3>iframe A</h3>
<iframe src="http://a.com:8090/subAdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
</div>
<div style="float:left;">
<h3>iframe B</h3>
<iframe src="http://b.com:8090/subBdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
</div>
<div style="float:left;">
<h5 id="received"></h5>
</div>
<script>
var received = document.querySelector('#received');
var sendToIframeA = document.querySelectorAll('input')[0];
var sendToIframeB = document.querySelectorAll('input')[1];
var iframeA = document.querySelectorAll('iframe')[0];
var iframeB = document.querySelectorAll('iframe')[1];
//receive message
function getMessage(e){
console.log('main received!');
received.innerHTML = 'Receive message from ' + e.origin + ', the data is ' + e.data;
e.source.postMessage('Received the message', e.origin);
}
window.addEventListener('message', getMessage, false);
//post message
sendToIframeA.addEventListener('click', function(){
var content = document.querySelector('textarea').value;
iframeA.contentWindow.postMessage(content, 'http://a.com:8090');
}, false);
sendToIframeB.addEventListener('click', function(){
var content = document.querySelector('textarea').value;
iframeB.contentWindow.postMessage(content, 'http://b.com:8090');
}, false);
</script>a.com
<h5>This is domain A</h5>
<textarea name="subA" cols="30" rows="10"></textarea>
<input type="button" value="send to parent"/>
<div style="float:left;">
<h5 id="received"></h5>
</div>
<script>
var send = document.querySelector('input');
var text = document.querySelector('textarea');
var received = document.querySelector('#received');
//receive message
function getMessage(e){
console.log('A received!');
received.innerHTML = 'Receive message from ' + e.origin + ', the data is ' + e.data;
//e.source.postMessage('Received the message', e.origin);
}
window.addEventListener('message', getMessage, false);
//post message
send.addEventListener('click', function(){
var content = text.value;
window.parent.postMessage(content, 'http://main.com:8090');
}, false);
</script>b.com
<h5>This is domain B</h5>
<textarea name="subB" cols="30" rows="10"></textarea>
<input type="button" value="send to parent"/>
<div style="float:left;">
<h5 id="received"></h5>
</div>
<script>
var send = document.querySelector('input');
var text = document.querySelector('textarea');
var received = document.querySelector('#received');
//receive message
function getMessage(e){
console.log('B received!');
received.innerHTML = 'Receive message from ' + e.origin + ', the data is ' + e.data;
//e.source.postMessage('Received the message', e.origin);
}
window.addEventListener('message', getMessage, false);
//post message
send.addEventListener('click', function(){
var content = text.value;
window.parent.postMessage(content, 'http://main.com:8090');
}, false);
</script>관련 기사 추천:
HTML5 애플리케이션: 오프라인 애플리케이션 및 저장 애플리케이션
의 postmessage를 통해 하위 창과 상위 창 사이의 값 전송을 구현하는 코드위 내용은 HTML5의 PostMessage는 도메인 간 코드 분석을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!