이 라이브러리는 iframe-resizer의 공식 React 인터페이스로, 동일 및 교차 도메인 iFrame의 높이와 너비를 포함 된 컨텐츠에 맞게 자동으로 크기를 조정할 수 있습니다. 

iFrame 사용과 관련된 가장 일반적인 문제를 해결하기 위해 다음과 같은 다양한 기능을 제공합니다.

https://github.com/davidjbradshaw/iframe-resizer-react 

• 컨텐츠 크기에 맞게 iFrame의 높이 및 너비 크기 조정.
• 여러 개의 중첩 된 iFrame과 작동합니다.
• 교차 도메인 iFrame에 대한 도메인 인증.
• 복잡한 CSS 레이아웃을 지원하기 위해 다양한 페이지 크기 계산 방법을 제공합니다.
• MutationObserver를 사용하여 페이지 크기를 조정할 수 있는 DOM 변경을 감지합니다.
• 페이지 크기를 조정할 수 있는 이벤트 (창 크기 조정, CSS 애니메이션 및 전환, 방향 변경 및 마우스 이벤트)를 감지합니다.
• postMessage를 통해 iFrame과 호스트 페이지 간 메시징이 간소화되었습니다.
• iFrame에서 페이지 링크를 수정하고 iFrame과 부모 페이지 사이의 링크를 지원합니다.
• 사용자 정의 크기 조정 및 스크롤 방법을 제공합니다.
• 부모 위치와 뷰포트 크기를 iFrame에 노출합니다.
• ViewerJS와 함께 작동하여 PDF 및 ODF 문서를 지원합니다.
• IE 11 지원

설치 

npm install --save iframe-resizer-react

용법 

<IframeResizer /> 구성 요소는 iframe-resizer의 옵션 및 이벤트와 함께 모든 <iframe> 속성을 ​​전달할 수 있습니다. 선택적으로 forwardRef를 전달하여 iframe의 페이지와 통신하기 위한 간단한 인터페이스를 제공하는 몇 가지 메소드에 액세스 할 수 있습니다.

<IframeResizer
  {iframe attributes}
  {iframe-resizer options}
  {iframe-resizer events}
/>

고급 설정 

이것은 iframe-resizer API의 옵션, 이벤트 및 메소드 사용을 보여주는 예제 폴더에서 가져온 고급 구성입니다. 자세한 내용은 아래를 참조하십시오.

import IframeResizer from 'iframe-resizer-react'
import React, { useRef, useState } from 'react'

import MessageData from './message-data'

export default () => {
  const iframeRef = useRef(null)
  const [messageData, setMessageData] = useState(undefined)

  const onResized = data => setMessageData(data)

  const onMessage = data => {
    setMessageData(data)
    iframeRef.current.sendMessage('Hello back from the parent page')
  }

  return (
    <div>
      <IframeResizer
        forwardRef={iframeRef}
        heightCalculationMethod="lowestElement"
        inPageLinks
        log
        onMessage={onMessage}
        onResized={onResized}
        src="http://anotherdomain.com/iframe.html"
        style={{ width: '1px', minWidth: '100%'}}
      />
      <MessageData data={messageData} />
    </div>
  )
}