iframe 작동 개선

겸손<iframe>은 다른 웹 페이지의 콘텐츠를 표시하는 유용한 방법이지만 작업을 원활하게 수행하기가 상당히 어려울 수 있습니다. 이 짧은 기사에서는 반응형 디자인에 통합하기가 조금 더 쉬워지는 방법을 제시합니다.

아이프레임 설정

중첩된 콘텐츠를 추가하는 것은 포함할 콘텐츠를 가리키는 <iframe> 속성이 있는 src 태그를 추가하는 것만큼 간단합니다.

<iframe src="/nested-content.html"></iframe>

기본적으로 이것은 약간의 요구사항을 남깁니다. 특히 높이와 너비는 호스트 페이지나 중첩된 콘텐츠의 크기를 고려하지 않습니다!



너비는 iframe 요소의 너비를 100%로 설정하면 상당히 쉽게 고정됩니다. 이를 수행하는 가장 빠른 방법은 기본 크기를 사용하는 것입니다.

iframe { width: 100%; }

이 iframe의 높이는 얼마입니까?

높이는 약간 다른 문제입니다. 동일한 방식으로(또는 iframe 의 속성을 통해) 높이를 설정할 수 있지만 얼마나 커야 하는지에 대한 질문이 있습니다. 이상적으로 우리는 이것을 iframe 콘텐츠의 높이로 설정하지만 이것을 알 수 있는 확실한 방법은 없습니다. 간단한 중첩 페이지의 경우 매우 쉽습니다.

#nested-content { height: 5.5rem; }

이게 훨씬 좋아 보인다! 그러나 문제가 있습니다. 이것은 고정된 높이이므로 내용이 중첩된 페이지의 내용이나 화면 크기의 변경에 응답하지 않습니다. 콘텐츠가 우리가 설정한 크기보다 길면 iframe 에 스크롤 막대가 생기는데, 이는 우리가 원하는 것이 아닐 수 있습니다.

반응 높이 만들기

희소식은 우리가 약간의 JavaScript를 사용하여 이 동적 크기 조정을 달성할 수 있다는 것입니다! 공격을 방지하기 위해 CORS (Cross-Origin Resource Sharing)에 의해 도입된 제한 때문에 postMessage() 방법을 사용하여 부모 페이지와 중첩된 페이지 간에 정보를 안전하게 공유해야 합니다.

기본 흐름은 중첩 페이지의 최상위 요소의 getBoundingClientRect() 메서드를 사용하여 중첩 페이지의 크기를 계산하는 것입니다. 이것은 document.documentElement 를 사용하여 액세스할 수 있습니다. 그런 다음 새 높이로 상위 페이지에 메시지를 보냅니다. 이벤트 리스너는 페이지 높이 변경에 반응하도록 만듭니다.

function sendResizeMessage() {
  const height = document.documentElement
    .getBoundingClientRect().height;
  parent.postMessage({ height }, parent.location);
}
sendResizeMessage();
addEventListener('resize', sendResizeMessage);

이제 해야 할 일은 상위 페이지에서 이 메시지를 수신하고 높이를 추출하고 그에 따라 iframe 크기를 설정하는 것입니다.

const iframe = document.getElementById('iframe-id');
addEventListener('message', (event) => {
  const height = event.data.height;
  iframe.style.height = height + 'px';
});

좋은 시민과 마찬가지로 이들은 모두 DOMContentLoaded 핸들러에 로드됩니다.

addEventListener(
  'DOMContentLoaded',
  <initialisation code here!>
);

조금 더 안전하게 만들기

우리가 실행하고 있는 코드는 상당히 무해하지만 누군가 우리에게 메시지를 보내고 iframe의 높이를 설정할 가능성이 있습니다. postMessage() 문서에서는 이벤트 소스와 출처를 확인하여 보낸 사람의 신원을 확인할 것을 제안합니다.

업데이트된 메시지 수신기는 이제 다음과 같습니다.

const iframe = document.getElementById('iframe-id');
addEventListener('message', (event) => {
  if(!(
    event.source === iframe.contentWindow &&
    event.origin === 'https://example.com'
  )) return;

  const height = event.data.height;
  iframe.style.height = height + 'px';
});

우리가 여기에서 한 모든 것은 그것을 테스트하는 것입니다.

이벤트 소스가 iframe 콘텐츠 창입니다

.

이벤트 출처가 예상 URL입니다

.

이것은 부정되므로 일치하지 않으면 함수가 일찍 반환됩니다.

iframe-resizer repo on GitHub 및 you can see it in action 에서 약간 더 완벽하게 해결된 예제가 있습니다.

도움이 되었기를 바라며 읽어주셔서 감사합니다!