HTML5의 문서 간 메시징 자세히 살펴보기
XDM이라고도 하는 문서 간 메시징은 서로 다른 도메인의 페이지 간에 메시지를 전송하는 것을 의미합니다. 예를 들어 www.w3cmm.com 도메인의 페이지는 인라인 프레임 에 있는 p2p.w3cmm.com 도메인의 페이지와 통신합니다. XDM 메커니즘이 등장하기 전에는 이러한 종류의 통신을 보다 안정적으로 구현하는 데 많은 노력이 필요했습니다. XDM은 이 메커니즘을 표준화하여 문서 간 통신을 안전하고 간단하게 구현할 수 있도록 해줍니다.
XDM의 핵심은 postMessage() 메소드입니다. HTML5 사양에서는 XDM 부분 이외의 다른 부분에서도 이 메서드 이름을 언급하지만 모두 동일한 목적, 즉 데이터를 다른 위치로 전송하는 것입니다. XDM의 경우 "다른 장소"는 현재 페이지에 포함된
postMessage() 메소드는 두 개의 매개변수, 즉 메시지와 메시지 수신자의 출신 도메인을 나타내는 문자열을 수신합니다. 두 번째 매개변수는 안전한 통신을 보장하고 브라우저가 안전하지 않은 장소로 메시지를 보내는 것을 방지하는 데 매우 중요합니다. 다음 예를 고려하십시오.
var iframWindow = document.getElementById("myframe").contentWindow; iframWindow.postMessage("A secret", "http://www.w3cmm.com");
코드의 마지막 줄은 인라인 프레임에 메시지를 보내려고 시도하며 프레임의 문서가 "http://www.w3cmm.com" 도메인에서 시작되어야 함을 지정합니다. 소스가 일치하면 메시지가 iframe으로 전달됩니다. 그렇지 않으면 postMessage()는 아무 작업도 수행하지 않습니다. 이러한 제한은 사용자가 모르는 사이에 창의 위치가 변경되는 것을 방지합니다. postMessage()에 전달된 두 번째 매개변수가 "*"인 경우 모든 도메인의 문서로 메시지를 보낼 수 있다는 의미이지만 권장하지는 않습니다.
이 XDM 메시지를 받으면 창 개체의 메시지 이벤트가 발생합니다. 이 이벤트는 비동기적으로 발생하므로 메시지 전송부터 메시지 수신까지 지연이 발생할 수 있습니다(수신 창의 메시지 이벤트 발생). message 이벤트가 트리거된 후 onmessage 핸들러에 전달된 이벤트 객체에는 다음 세 가지 중요한 정보가 포함됩니다.
data: postMessage()의 첫 번째 매개변수로 전달된 문자열 데이터입니다.
origin: "http://www.w3cmm.com"과 같이 메시지를 보내는 문서가 위치한 도메인입니다.
소스: 메시지를 보내는 문서의 창 개체의 프록시입니다. 이 프록시 객체는 주로 이전 메시지를 보낸 창에서 postMessage() 메서드를 호출하는 데 사용됩니다. 메시지를 보내는 창이 동일한 도메인에 있는 경우 이 개체는 창입니다.
메시지를 받은 후에는 보내는 창의 출처를 확인하는 것이 중요합니다. 브라우저가 알 수 없는 페이지에 메시지를 보내지 않도록 postMessage() 메서드에 두 번째 매개변수를 지정하는 것과 마찬가지로 onmessage 핸들러에서 메시지 소스를 감지하면 들어오는 메시지가 알려진 페이지에서 오는지 확인할 수 있습니다. 기본 감지 모드는 다음과 같습니다.
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } } }; EventUtil.addHandler(window, "message", function (event) { //确保发送消息的域是已知的域 if (event.origin == "http://www.w3cmm.com") { //处理接收到的数据 processMessage(event.data); //可选:向来源窗口发送回执 event.source.postMessage("Received!", "http://p2p.w3cmm.com"); } });
event.source는 대부분의 경우 실제 창 개체가 아니라 창 개체에 대한 프록시일 뿐이라는 점을 모두에게 상기시키고 싶습니다. 즉, 이 프록시 개체를 통해 창 개체에 대한 다른 정보에 액세스할 수 없습니다. 이 프록시를 통해 postMessage()를 호출하면 됩니다. 이 메서드는 존재하지 않으며 항상 호출될 수 있습니다.
XDM에도 몇 가지 특징이 있습니다. 우선 postMessage()의 첫 번째 매개변수는 "항상 문자열"로 처음 구현되었습니다. 그러나 나중에 이 매개변수의 정의는 모든 데이터 구조가 전달될 수 있도록 변경되었습니다. 그러나 모든 브라우저가 이 변경 사항을 구현한 것은 아닙니다. 안전을 위해 postMessage()를 사용할 때는 문자열만 전달하는 것이 가장 좋습니다. 구조화된 데이터를 전달하려는 경우 가장 좋은 방법은 먼저 전달할 데이터에 대해 JSON.stringify()를 호출하고 postMessage()를 통해 전달하는 것입니다. 문자열을 입력한 다음 onmessage 이벤트 핸들러 프로그램에서 JSON.parse()를 호출합니다.
인라인 프레임을 통해 다른 도메인의 콘텐츠를 로드할 때 XDM을 사용하면 매우 편리합니다. 따라서 이러한 메시지 전달 방법은 매시업 및 소셜 네트워킹 애플리케이션에서 매우 일반적입니다. XDM을 사용하면
위 내용은 HTML5의 문서 간 메시징 자세히 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
