문서 간 메시징(iframe 메시징)의 HTML5 실습 및 분석

서로 다른 도메인 이름의 페이지 간에 메시지를 전송하는 것을 일반적으로 문서 간 메시징, 줄여서 XDM이라고 합니다. 예를 들어, www.leemagnum.com 도메인의 페이지는 인라인 프레임에 있는 //m.sbmmt.com/ 도메인 이름의 페이지와 통신합니다. XDM 메커니즘이 등장하기 전에는 이런 종류의 통신을 아무런 스트레스 없이 구현하는 데 오랜 시간이 걸렸을 것입니다. XDM은 이 메커니즘을 표준화하여 문서 간 통신을 안전하고 간단하게 수행할 수 있도록 해줍니다.

XDM의 핵심은 postMessage() 메소드입니다. XDM의 경우 "다른 장소"는 현재 페이지에 포함된 iframe 태그 또는 현재 페이지에서 팝업되는 창을 의미합니다.

postMessage() 메서드는 메시지와 메시지가 허용되는 도메인 이름을 나타내는 문자열이라는 두 가지 매개변수를 받습니다. 두 번째 매개변수는 안전한 통신을 보장하고 브라우저가 안전하지 않은 장소로 메시지를 보내는 것을 방지하는 데 매우 중요합니다. 작은 예는 다음과 같습니다

　HTML 코드

<iframe id="iframe" src="http://blog.csdn.net/lee_magnum" frameborder="0"></iframe>

　JavaScript 코드

//获取框架中的window
var iframeWin = document.getElementById("iframe").contentWindow;
alert(iframeWin) // [object window]

//向框架中发送消息
iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")

JavaScript 코드의 마지막 코드 줄은 인라인 프레임에 메시지를 보내려고 시도하며 프레임의 문서가 "http://"에서 시작되어야 함을 지정합니다. m.sbmmt.com/ "도메인. 소스가 일치하면 메시지가 iframe으로 전달되고, 그렇지 않으면 postMessage()는 아무 작업도 수행하지 않습니다. 이러한 제한으로 인해 일부 상황에서는 창의 위치가 변경되지 않습니다. postMessage()에 전달된 두 번째 매개변수가 "*"이면 모든 도메인의 문서로 메시지를 보낼 수 있다는 의미입니다.

XDM 메시지가 수신되면 창 개체의 메시지 이벤트가 트리거됩니다. 이 이벤트는 비동기적으로 발생하므로 메시지 전송부터 메시지 수신까지(수신 창의 메시지 이벤트 발생) 이벤트 지연이 있을 수 있습니다. message 이벤트가 트리거된 후 onmessage 핸들러에 전달된 이벤트 객체에는 다음 세 가지 중요한 정보가 포함됩니다.

　data: postMessage() 메소드의 첫 번째 매개변수로 전달된 문자열 데이터

　origin: 보낸 문서의 도메인 "//m.sbmmt.com/"

　source와 같은 메시지: 메시지를 보내는 문서의 창 개체의 프록시입니다. 이 프록시 객체는 주로 이전 메시지를 보낸 창에서 postMessage() 메서드를 호출하는 데 사용됩니다. 메시지를 보내는 창이 동일한 도메인 이름에서 오는 경우 이 개체는 창입니다.

메시지를 받은 후에는 보내는 창의 출처를 확인하는 것이 매우 필요합니다. 브라우저가 알 수 없는 페이지에 메시지를 보내지 않도록 postMessage() 메서드에 두 번째 매개변수를 지정하는 것과 마찬가지로 onmessage() 메서드 핸들러에서 메시지 소스를 확인하면 들어오는 메시지가 알려진 페이지에서 오는지 확인할 수 있습니다. 페이지. 기본 감지 모드는 다음과 같습니다

　JavaScript 코드

window.addEventListener('message',function(event){
	//确保发送消息的域名是已知的域名
	if(event.origin == "http://blog.csdn.net/lee_magnum"){
		//处理接收到的数据
		processMessage(event.data);
		//可选：向来源窗口发送回执
		event.source.postMessage("收到了", "http://www.leemagnum.com");
	}
}, false);

Event.Source는 창에 대한 프록시일 뿐입니다. 대부분의 경우 실제 창 개체가 아닌 개체입니다. 즉, 이 이벤트를 통해 창 개체에 대한 다른 정보에 액세스할 수 없습니다. 소스 프록시 개체입니다. postMessage() 메서드는 event.Source 프록시를 통해서만 호출할 수 있습니다.

XDM에는 또 이상한 점이 있습니다. 우선 postMessage()의 첫 번째 매개변수는 "항상 문자열"로 처음 ​​구현되었습니다. 그러나 나중에 이 매개변수의 정의는 모든 데이터 구조가 전달될 수 있도록 변경되었습니다. 그러나 모든 브라우저가 이러한 변경 사항을 구현한 것은 아닙니다. 따라서 안전을 위해 postMessage() 메서드를 사용할 때는 문자열만 전달하는 것이 가장 좋습니다. 구조화된 데이터를 전달하려면 전달할 데이터에 대해 JSON.stringify()를 호출하고 postMessage() 메서드를 통해 결과 문자열을 전달한 다음 onmessage 이벤트 핸들러 .parse에서 JSON을 호출하는 것이 가장 좋습니다. () 방법.

XDM을 지원하는 브라우저에는 Opera, IE8+, Safari 4+, Firefox 3.5+, Chrome, Android용 Webkit 및 iOS용 Safari가 있습니다. XDM에 대한 자세한 내용은 XDM 공식 페이지를 참조하세요. XDM 공식 페이지는 //m.sbmmt.com/

입니다. HTML5 실제 전투에 대한 관련 지식과 문서 간 메시징(iframe 메시징) 분석이 여기에 소개되어 있으며, 더 많은 관련 콘텐츠를 결제해 주세요. PHP 중국어 웹사이트(m.sbmmt.com)에 주목하세요!