일반적으로 웹 개발을 수행 할 때는 클라이언트 및 서버 전송 외에 종종 발생하는 몇 가지 문제가 있습니다.
1. 페이지와 새 창의 데이터 전송이 열렸습니다
2. 여러 창 사이의 메시지
3. 페이지 및 중첩 iframe 메시지 전송
4. 위의 세 가지 문제의 크로스 -도메인 데이터 전송
postmessage ()이러한 문제에는 몇 가지 솔루션이 있지만 HTML5가 도입 한 메시지 API는보다 편리하고 효과적이며 안전하게 해결할 수 있습니다. postMessage () 메소드를 사용하면 다른 소스의 스크립트가 제한된 통신에 비동기 메소드를 사용하여 크로스 텍스트 파일, 멀티 윈도우 및 교차 -도메인 메시지를 실현할 수 있습니다.
postmessage (data, origin) 메소드는 두 매개 변수를 허용합니다
데이터 : 데이터를 전달할 수있는 HTML5 사양은 매개 변수가 JavaScript의 기본 유형 또는 복제 가능한 객체 일 수 있다고 언급했지만 일부 브라우저는이 작업을 수행 할 수있는 것은 아닙니다. json.stringify () 메소드를 사용하여 객체 매개 변수를 직렬화해야합니다. 2. ORIGIN : String 매개 변수는 대상 창, 프로토콜+포트 번호 [+url]의 소스를 나타내 므로이 매개 변수는 PostMessage () 메소드를 작성할 수 있습니다 지정된 창으로 만 메시지를 전달하십시오. 에게/.http://test.com/index.html
<divy style = width : float; 왼쪽; 200px; solid 1px #333; src = http://lslib.com/lslib.html> </iframe> </div>
http://test.com/index.html 인 경우 Cross -Domnain의 Cross -Domain iframe 페이지 http : //lslib.html에 메시지를 전달할 수 있습니다.
window.onload = function () {window.frames [0] .postMessage ( 'getColor', 'http://lslib.com');} 수신 메시지위의 페이지는 test.com의 메시지를 lslib.com으로 보냈으므로 lslib.com 페이지에서 메시지를 수신하고 Window의 메시지 이벤트의 메시지 이벤트를 모니터링하는 방법을 보냈습니다.
http://lslib.com/lslib.html
Window.AddeventListener ( '메시지', 함수 (e) {if (e.source! = wind 거짓;이런 식으로, 우리는 안전을 위해 모든 창을 통과하는 메시지를받을 수 있습니다.
몇 가지 중요한 속성이 있습니다
1. 데이터 : 이름에서 알 수 있듯이 전달되는 메시지입니다. 2. 소스 : 메시지를 보낼 창 객체 3. Origin : 메시지 보내기 소스 (프로토콜+호스트+포트 번호)이런 식으로, 당신은 교차 메시지를받을 수 있습니다
간단한 데모이 예에서 왼쪽의 DIV는 오른쪽 오른쪽의 DIV의 색상 변화에 따라 변경됩니다.
<html> <html> <head> <title> 게시물> </head> <div style : 200px; <div id = color> 프레임 색상 </div> </div> <div> <iframe id = child src = http://lslib.com/lslib.html> </div> </div> <script type = text/javaScript> wind {var color = e.data <html> <html> <wead> <steyle type/css> html {height : 0px; <body style = height; = 컨테이너 changecolor (); ); window.adeventListener ( 'message', function (e) {if (e.source! = wind ;}, false); ';} else {color ='rgb (204,102,0) ';} container.style.backgroundcolor = color; .html예제에 페이지가로드되면 홈페이지는 'getColor'요청을 iframe에 보냅니다 (매개 변수는 실용적이지 않음).
window.onload = function () {window.frames [0] .postMessage ( 'getColor', 'http://lslib.com');}iframe은 메시지를 수신하고 현재 색상을 메인 페이지로 보냅니다.
Window.AddeventListener ( '메시지', 함수 (e) {if (e.source! = wind 거짓;홈페이지에서 메시지를 받고 자신의 div 색상을 변경하십시오.
window.adeventListener ( 'message', function (e) {var color = e.Data; document.getElementById ( 'color'). Style.backgroundColor = color;);iframe을 클릭하면 색상 변경 방법을 트리거 할 때 메인 페이지로 최신 색상을 보내십시오.
함수 changecolor () {var color = container.style.backgroundcolor; rgb (204,102,0) ';} container.style.backgroundcolor = wind홈페이지는 여전히 메시지 이벤트를 듣는 프로그램을 사용하여 자체 변색을 처리합니다.
window.adeventListener ( 'message', function (e) {var color = e.Data; document.getElementById ( 'color'). Style.backgroundColor = color;); 마침내간단한 사용법은 큰 문제를 해결하고 있으며 Facebook이 이미 사용하고 있다고합니다. 너무 많은 브라우저 호환성은 IE가 시작한 문제가되었습니다. 본질 본질 그러나 좋은 소식은 LocalStorage와 비슷하지만 일부 브라우저 (예 : Firefox4.0)는 Window를 지원하지 않습니다. AddEventListener를 지원할지 여부를 결정합니다.
위는이 기사의 모든 내용입니다.