Window: message 이벤트

message 이벤트는 window가 메세지를 받을 때, 예를 들어 다른 브라우징 맥락에서 Window.postMessage()을 호출할 때 Window 객체에서 실행됩니다.

이 이벤트는 취소할 수 없고, 버블링되지도 않습니다.

구문

addEventListener()와 같은 메서드에서 이벤트 이름을 사용하거나, 이벤트 핸들러의 속성을 설정하세요.

addEventListener("message", (event) => {});

onmessage = (event) => {};

이벤트 타입

Event로부터 상속된 MessageEvent입니다.

이벤트 속성

이 인터페이스는 부모인 Event의 속성들도 상속받습니다.

MessageEvent.data 읽기 전용

발신자가 보낸 메세지 데이터입니다.

MessageEvent.origin 읽기 전용

발신자의 출처를 나타내는 문자열입니다.

MessageEvent.lastEventId 읽기 전용

이벤트의 고유한 ID 값을 나타내는 문자열입니다.

MessageEvent.source 읽기 전용

발신인을 나타내는 MessageEventSource(WindowProxy, MessagePort, ServiceWorker 등등) 입니다.

MessageEvent.ports 읽기 전용

메세지가 전송되는 채널과 연결된 포트를 나타내는 MessagePort 객체의 배열입니다(공유 워커에 메세지를 보내거나, 채널 메세징에 적합합니다).

예시

서로 다른 <iframe>과 같은, 다른 브라우징 맥락에서 메세지를 보낸다고 가정할 때, 아래와 같이 코드를 작성하면 됩니다.

const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const windowMessageButton = document.querySelector("#window-message");

windowMessageButton.addEventListener("click", () => {
  targetFrame.postMessage("hello there", targetOrigin);
});

수신자는 addEventListener()를 사용해, 아래 코드와 같이 메세지를 받을 수 있습니다.

window.addEventListener("message", (event) => {
  console.log(`Received message: ${event.data}`);
});

다른 방법으로는 onmessage라는 이벤트 핸들러의 속성을 이용할 수 있습니다.

window.onmessage = (event) => {
  console.log(`Received message: ${event.data}`);
};

명세서

브라우저 호환성

같이 보기

• 연관된 이벤트들: messageerror.
• Window.postMessage().