postMessage를 사용하여 H5의 두 웹 페이지 간에 데이터를 전송하는 방법

이번에는 H5에서 postMessage를 사용하여 두 웹 페이지 간에 데이터를 전송하는 방법을 보여 드리겠습니다. H5에서 postMessage를 사용하여 두 웹 페이지 간에 데이터를 전송하는 방법은 무엇입니까? 두 개의 postMessage 웹 페이지 간에 데이터를 전송할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 살펴보겠습니다.

HTML5 APIS에 window.postMessage API가 있다는 사실을 아는 사람은 거의 없을 것으로 추정됩니다. window.postMessage의 기능은 프로그래머가 도메인 전체의 두 창/프레임 간에 데이터 정보를 보낼 수 있도록 하는 것입니다. 기본적으로 이는 도메인 간 AJAX와 비슷하지만 브라우저와 서버 간 상호 작용 대신 두 클라이언트 간에 통신합니다. window.postMessage가 어떻게 작동하는지 살펴보겠습니다. IE6 및 IE7을 제외한 모든 브라우저는 이 기능을 지원합니다.

데이터 전송 종료

가장 먼저 해야 할 일은 데이터 소스 "소스"인 통신 개시자를 생성하는 것입니다. 개시자로서 새 창을 열거나 iframe을 생성하고 새 창에 데이터를 보낼 수 있습니다. 단순화를 위해 6초마다 데이터를 보낸 다음 대상 창에서 피드백 정보를 수신하는 메시지 수신기를 만듭니다. .

//弹出一个新窗口   
var domain = 'http://scriptandstyle.com';   
var myPopup = window.open(domain    
            + '/windowPostMessageListener.html','myWindow');   
  
//周期性的发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 myPopup.postMessage(message,domain);   
},6000);   
  
//监听消息反馈   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://scriptandstyle.com') return;   
 console.log('received response:  ',event.data);   
},false);

여기서는 window.addEventListener를 사용했는데 IE에서는 window.attachEvent를 사용하기 때문에 IE에서는 작동하지 않습니다. 브라우저 유형을 결정하지 않으려면 jQuery 또는 Dojo와 같은 일부 도구 라이브러리를 사용할 수 있습니다.

창이 정상적으로 팝업되고 메시지가 전송된다고 가정합니다. URI를 지정해야 하며(필요한 경우 프로토콜, 호스트, 포트 번호 등을 지정해야 함) 메시지 수신자가 지정된 위치에 있어야 합니다. URI. 대상 창이 교체되면 메시지가 전송되지 않습니다.

피드백 정보를 받을 수 있는 이벤트 리스너도 만들었습니다. 한 가지 매우 중요한 점은 메시지 소스의 URI를 확인해야 한다는 것입니다! 합법적인 경우에만 대상 당사자의 메시지를 처리할 수 있습니다.

iframe을 사용하는 경우 코드는 다음과 같이 작성되어야 합니다.

//捕获iframe   
var domain = 'http://scriptandstyle.com';   
var iframe = document.getElementById('myIFrame').contentWindow;   
  
//发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 iframe.postMessage(message,domain);    
},6000);

노드 개체가 아닌 iframe의 contentWindow 속성을 사용하고 있는지 확인하세요.

데이터 수신 종료

다음으로 개발할 것은 데이터 수신 종료 페이지입니다. 마찬가지로, 메시지 소스의 주소도 확인해야 합니다. 메시지는 모든 주소에서 올 수 있습니다. 처리 중인 메시지가 신뢰할 수 있는 주소에서 오는지 확인하세요.

//响应事件   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://davidwalsh.name') return;   
 console.log('message received:  ' + event.data,event);   
 event.source.postMessage('holla back youngin!',event.origin);   
},false);

위의 코드 조각은 메시지가 수신되었는지 확인하기 위해 메시지 소스에 정보를 피드백하는 것입니다. 다음은 몇 가지 중요한 이벤트 속성입니다:

source – 메시지 소스, 메시지 전송 창/iframe.
origin – 데이터 소스를 확인하는 데 사용되는 메시지 소스의 URI(프로토콜, 도메인 이름 및 포트가 포함될 수 있음).
data – 발신자가 수신자에게 보내는 데이터입니다.

이 세 가지 속성은 메시지 전송에 반드시 사용해야 하는 데이터입니다.

window.postMessage 사용

다른 많은 웹 기술과 마찬가지로 데이터 소스의 적법성을 확인하지 않으면 이 기술을 사용하는 것은 매우 위험해지며 애플리케이션의 보안에 대한 책임은 사용자에게 있습니다. window.postMessage는 PHP와 JavaScript 기술과 비슷합니다. window.postMessage 멋지지 않나요?

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

vue.js 도서 관리 플랫폼 구축을 위한 세부 단계

부트스트랩에서 테이블 합계 수를 계산하는 방법

JS를 사용하여 버튼을 비활성화 및 활성화하는 방법

위 내용은 postMessage를 사용하여 H5의 두 웹 페이지 간에 데이터를 전송하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!