HTML5의 문서 간 메시징 자세히 살펴보기

XDM이라고도 하는 문서 간 메시징은 서로 다른 도메인의 페이지 간에 메시지를 전송하는 것을 의미합니다. 예를 들어 www.w3cmm.com 도메인의 페이지는 인라인 프레임 에 있는 p2p.w3cmm.com 도메인의 페이지와 통신합니다. XDM 메커니즘이 등장하기 전에는 이러한 종류의 통신을 보다 안정적으로 구현하는 데 많은 노력이 필요했습니다. XDM은 이 메커니즘을 표준화하여 문서 간 통신을 안전하고 간단하게 구현할 수 있도록 해줍니다.

XDM의 핵심은 postMessage() 메소드입니다. HTML5 사양에서는 XDM 부분 이외의 다른 부분에서도 이 메서드 이름을 언급하지만 모두 동일한 목적, 즉 데이터를 다른 위치로 전송하는 것입니다. XDM의 경우 "다른 장소"는 현재 페이지에 포함된 d5ba1642137c3f32f4f4493ae923989c 요소 또는 현재 페이지에서 팝업되는 창을 나타냅니다.

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을 사용하면 d5ba1642137c3f32f4f4493ae923989c이 포함된 페이지는 포함된 프레임에 대해서만 XDM을 통해 통신하므로 악성 콘텐츠로부터 스스로를 보호할 수 있습니다. XDM은 동일한 도메인의 페이지 간에도 사용할 수 있습니다.

위 내용은 HTML5의 문서 간 메시징 자세히 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!