HTML5의 새로운 기능에 대한 자세한 설명: 문서 간 메시지 전송

1. 동일 도메인 제한

'동일 도메인 제한'이란 보안을 고려하여 브라우저는 스크립트가 동일한 프로토콜, 동일한 도메인 이름 및 동일한 포트의 주소와 통신하도록 허용합니다.

2. window.postMessage 메소드

브라우저 두 창이 동일한 도메인 이름으로 웹 페이지를 로드하지 않는 한, 창(iFrame 창 포함) 간 통신에는 제한이 다릅니다. window.postMessage 메소드는 이 문제를 해결하기 위한 특정 API로, 서로 다른 도메인을 허용할 수 있습니다. Windows는 서로 통신합니다.

postMessage 메소드의 형식은 다음과 같습니다.

targetWindow.postMessage(message, targetURL[, transferObject]);

위 코드에서 targetWindow는 이를 가리키는 변수입니다. 메시지는 전송할 메시지이며, 대상 창의 URL이 URL과 일치하지 않으면 아무런 정보도 전송되지 않습니다. 정보와 함께 전송됩니다. 🎜> 그러면 현재 웹페이지에서 이벤트 메시지를 들어보세요. 코드는 메시지 이벤트의

콜백 함수가 receiveMessage임을 지정하고, receiveMessage 함수는 이벤트 이벤트 객체를 매개변수로 받습니다. 🎜> 속성

은 메시지의 소스 URL을 나타냅니다. URL이 요구 사항을 충족하지 않으면 이벤트가 즉시 반환됩니다. 이벤트 개체에는 현재 웹 페이지에 정보를 보내는 창 개체를 가리키는 source 속성도 있습니다. 그런 다음 postMessage 메서드를 사용하여 현재 웹 페이지의 새 창에 정보를 보냅니다. 🎜>위 코드의 postMessage 메소드의 첫 번째 매개변수는 실제 전송되는 정보이고, 두 번째 매개변수는 상대방의 창이 아닌 경우에는 보내는 객체의 도메인 이름이 http://example.org여야 함을 지정합니다. 도메인 이름이 있으면 정보가 전송되지 않습니다.

마지막으로 팝업 창에 다음 코드를 배포합니다.

var popup = window.open(...popup details ...);

우선 위 코드에 필요한 부분이 있습니다. receiveMessage 함수에는 필터링된 정보의 소스가 없으며 모든 URL에서 전송된 정보가 처리됩니다. 둘째, postMessage 메소드에 지정된 대상 창의 URL은 별표로 표시되어 정보가 모든 URL로 전송될 수 있음을 나타냅니다. 일반적으로 이 두 가지 방법은 충분히 안전하지 않고 상대방에 의해 필터링될 수 있으므로 권장되지 않습니다.

모든 브라우저는 이 방법을 지원하지만 IE8 및 IE9에서는 postMessage 방법만 새 창과의 통신이 아닌 iFrame 창과의 통신을 허용합니다. IE10에서는 새 창과의 통신을 허용하지만 IE 전용 MessageChannel 객체만 사용합니다

위 내용은 HTML5의 새로운 기능에 대한 자세한 설명: 문서 간 메시지 전송의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!