>웹 프론트엔드 >JS 튜토리얼 >JavaScript는 HTML5의 window.postMessage를 사용하여 도메인 간 통신 example_javascript 기술을 구현합니다.

JavaScript는 HTML5의 window.postMessage를 사용하여 도메인 간 통신 example_javascript 기술을 구현합니다.

WBOY
WBOY원래의
2016-05-16 16:52:391816검색

동일 출처 정책의 제한으로 인해 JavaScript에서는 도메인 간 통신이 항상 까다로운 문제였습니다. 물론 다양한 해결 방법이 있습니다.
1. document.domain iframe의 설정은 동일한 기본 도메인이지만 다른 하위 도메인에 적용됩니다.
2. iframe과 location.hash를 사용하면 데이터가 URL, 데이터 용량 및 유형은 제한되어 있습니다
3.Flash LocalConnection, 객체는

동일한 클라이언트에 여러 애플리케이션에 걸쳐 있는 한 하나의 SWF 파일 또는 여러 SWF 파일 간에 통신할 수 있습니다. 도메인 전반에 걸쳐.
window.name은 데이터를 저장하고 도메인 간 iframe 정적 프록시 동적 전송 방식은 페이지의 URL이 변경되어도 이름이 변경되지 않는 window.name의 기능을 최대한 활용합니다.
인터넷에는 다양한 솔루션에 대한 예제 코드가 많이 있으며 직접 검색할 수 있습니다.

html5의 가장 멋진 API 중 하나: 문서 간 메시징. 고급 브라우저 Internet Explorer 8, Chrome, Firefox, Opera 및 Safari는 모두 이 기능을 지원합니다. 이 기능의 구현도 매우 간단합니다. 주로 정보 수신을 위한 "message" 이벤트와 메시지 전송을 위한 "postMessage" 메소드를 포함합니다.

메시지를 보내는 "postMessage" 방법

외부 창으로 메시지 보내기:

코드 복사 코드는 다음과 같습니다.
otherWindow.postMessage(message, targetOrigin);

otherWindow: 대상 창을 나타냅니다. 메시지를 보낼 창(window.frames 속성) window.open 메서드의 멤버 또는 창에 의해 생성된 창
매개변수 설명:
1.message: 보낼 메시지, 유형은 문자열, Object (IE8 및 9에서는 지원되지 않음)
2.targetOrigin: Yes 메시지 수신 범위를 제한하려면 제한되지 않은 경우 '*'를 사용하여 메시지를 수신하세요.



코드 복사 코드는 다음과 같습니다. var onmessage = function (event) {
var data = event.data;
var Origin = event.origin;
//do someing
}
if (typeof window.addEventListener != '정의되지 않음 ') {
window.addEventListener('message', onmessage, false)
} else if (typeof window.attachEvent != 'undefine') {
//for ie
window.attachEvent ('onmessage', onmessage);
}

콜백 함수의 첫 번째 매개변수가 수신됩니다. 이벤트 객체에는 일반적으로 사용되는 세 가지 속성이 있습니다.
1.data: message
2.origin: message source address
3.source: source DOMWindow object

물론 postmessage에도 몇 가지 단점이 있습니다.
1.ie8, ie9에서 전달되는 데이터 유형 값은 문자열 유형을 지원하지만 다음을 사용할 수 있습니다. 이 문제를 해결하려면 JSON 개체와 문자열 간의 상호 변환이 필요합니다.
2.ie6, ie7은 호환성 솔루션을 작성해야 합니다. 개인적으로 window.name이 더 안정적이라고 생각합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.