[javascript] 다수의 iframe, postMessage 전송, 수신 방법

한 페이지 내에서 다수의 iframe이 존재하고, iframe 내부와 parent간의 메시지 송, 수신을 하는 경우가 있습니다.
아래는 iframeId를 생성하고, 정확하게 자신의 iframe간의 메시지 송, 수신이 가능한 방법입니다.

iframeId를 생성하고 전달하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 각 iframe에 고유 식별자를 미리 할당하는 것입니다. 이 식별자는 iframe의 id 속성이나 데이터 속성(data-*)을 사용하여 설정할 수 있습니다. 그런 다음 iframe 내부 스크립트에서 이 식별자를 읽어 postMessage를 통해 부모 페이지로 전달합니다.

iframe에 식별자 할당

부모 페이지에서 각 iframe에 고유한 식별자를 할당합니다. 이는 id 속성 또는 data-id와 같은 데이터 속성을 사용하여 할 수 있습니다.

<iframe id="iframe1" src="your-iframe-source.html"></iframe>
<iframe id="iframe2" src="your-iframe-source.html"></iframe>
<!-- 이런 식으로 각 iframe에 고유한 id 또는 데이터 속성을 할당 -->

iframe 내부에서 식별자 읽기

iframe 내부의 스크립트에서는 해당 iframe의 식별자를 읽어 메시지에 포함시킵니다. 이를 위해 window.frameElement를 사용하여 현재 iframe의 요소에 접근할 수 있습니다.

$(document).ready(function () {
  // 현재 iframe의 id 읽기
  const iframeId = window.frameElement ? window.frameElement.id : 'unknown';

  // 부모 윈도우에 메시지 전송
  window.parent.postMessage({
    type: "iframePostMessage",
    iframeId: iframeId,
    detail: { /* 필요한 데이터 */ }
  }, "*");
});

부모 페이지에서 메시지 수신 및 처리

부모 페이지에서는 전달받은 iframeId를 사용하여 각 iframe으로부터 오는 메시지를 구분하고 적절하게 처리합니다.

window.addEventListener('message', function (e) {
  if (e.data && e.data.type === 'iframePostMessage') {
    const iframeId = e.data.iframeId;
    console.log('post message from iframe:', iframeId, e.data.detail);

    // 이제 여기에서 iframeId를 기반으로 특정 iframe에 대한 처리를 수행할 수 있습니다.
  }
});

이 방법을 통해 각 iframe은 자신의 식별자를 포함한 메시지를 부모 페이지로 보내며, 부모 페이지는 이 식별자를 사용하여 각 메시지를 구분하고 적절한 로직을 실행할 수 있습니다.