HTML5에서 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입니다.

데이터 수신 종료

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

//响应事件   

    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 멋지지 않나요?

위 내용은 postMessage를 사용하여 HTML5에서 두 웹 페이지 간 데이터를 전송하는 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. !