iframe-resizer 라이브러리는 iframe 사용 시 발생하는 문제점을 해결하는 것을 목표로 합니다. 콘텐츠 크기에 맞게 iframe 크기를 조정한 다음 iframe을 모니터링하여 항상 완벽한 크기인지 확인합니다.
브라우저는 콘텐츠 크기를 계산하는 일관되고 신뢰할 수 있는 단일 방법을 제공하지 않기 때문에 iframe-resizer는 변경된 내용을 감지할 때마다 자동으로 페이지를 검사하고 콘텐츠에 가장 적합한 값을 선택합니다.
사이트에 미치는 영향을 최소화하기 위해 iframe-resizer는 고도로 최적화되어 있으며 집합 이론을 활용하여 iframe 크기에 영향을 미치는 페이지 요소만 확인합니다.
가장 복잡한 페이지에서도 iframe-resizer는 HTML과 CSS의 변경 사항을 감지하고 수정된 콘텐츠 크기를 계산하며 밀리초 미만의 시간 내에 iframe을 업데이트할 수 있습니다.
호스팅하는 사이트에 영향을 주지 않는 게스트가 되도록 설계된 간단한 JS 파일을 통해 내부(동일 도메인) 및 외부(교차 도메인) iframe을 모두 지원합니다.
또한 iframe-resizer는 iframe 콘텐츠를 상위 페이지와 안전하게 통합할 수 있는 다양한 누락된 브라우저 API 기능을 제공합니다.
onMouseEnter
및 onMouseLeave
이벤트를 추가합니다.Viewer.js와 결합하면 PDF 및 ODF 문서가 포함된 iframe의 크기도 조정할 수 있습니다.
설정 가이드 및 API 문서는 iframe-resizer 웹사이트를 참조하세요. 여기에는 다음 버전이 포함됩니다.
다음에 대한 설정 가이드와 함께:
또한 추가 사용자 정의 구성 요소 생성을 지원하는 API이기도 합니다.
이 iframe-resizer 버전은 최신 브라우저 API를 사용하도록 광범위하게 재작성되어 콘텐츠 크기 조정 이벤트 감지 시 성능이 크게 향상되고 정확도가 향상되었습니다.
이번 릴리스에서는 API를 새로 고치고 단순화할 수 있는 기회가 생겼습니다. 이전 버전에서 오는 경우 변경 사항을 설명하는 업그레이드 가이드를 참조하세요.
버전 5의 경우 iframe-resizer는 두 개의 기본 패키지로 분할되어 다양한 도메인에 배포하기가 더 간단해지고 트리 쉐이킹을 더 잘 지원합니다. 이 두 패키지는 NPM에서 설치하거나 zip 파일로 다운로드할 수 있습니다.
상위 페이지 패키지는 자동 콘텐츠 크기 조정을 위해 iframe을 설정합니다. 여러 인기 있는 라이브러리 및 프레임워크에 대한 이 패키지 버전입니다(아래 참조).
이 패키지는 초기화하기 전에 상위 페이지의 메시지를 조용히 기다리는 iframe에 로드되어야 합니다. 다른 사이트의 좋은 손님이 되도록 설계되었습니다.
두 가지 기본 패키지 외에도 다음 플랫폼에 대한 상위 패키지 버전이 있습니다.
상위 페이지의 React 구성 요소입니다.
상위 페이지의 Vue 구성 요소입니다.
상위 페이지에 대한 간단한 jQuery 래퍼입니다.
@iframe-resizer/parent
에서 사용되는 상위 페이지의 핵심 API와 프레임워크 및 라이브러리 구성 요소 버전입니다.
저작권 © 2013-24 David J. Bradshaw - GPL V3에 따라 라이센스가 부여됨