[iframe] 작동하는 교차 도메인 iframe 높이 자동 크기 조정기가 있습니까?

직장에서 작업하는 동안 (React 사용)이 문제가 발생했습니다. 기본적으로 데이터베이스의 문서 테이블에 저장 한 다음 문서 데이터 세트에있을 때 특정 상황에서 페이지에 삽입하는 일부 외부 html 콘텐츠가 있습니다.

따라서 외부 html을 포함 n할 n수있는 인라인이 주어지면 콘텐츠가 각각에 완전히로드되면 각 인라인의 iframe 크기를 자동으로 조정하는 시스템을 고안해야했습니다. 내 바퀴를 조금 돌린 후, 이렇게하게되었습니다.

1. message보낸 사람 iframe에서 설정할 특정 키를 확인하는 React 앱의 색인에 이벤트 리스너를 설정합니다 .
2. 실제로 iframe을 렌더링하는 구성 요소에서 외부 HTML을 삽입 한 후 iframe이 실행될 <script>때까지 대기 하는 태그를 추가합니다 window.onload. 실행되면 postMessageiframe ID, 계산 된 높이 등에 대한 정보와 함께 상위 창에 메시지를 보내는 데 사용 합니다.
3. 오리진이 일치하고 인덱스 리스너에서 키가 충족 id되면 MessageEvent객체 에서 전달하는 iframe 의 DOM 을 가져옵니다.
4. 일단 우리는 iframeiframe에서 전달 된 값에서 높이를 설정합니다 postMessage.

// index
if (window.postMessage) {
    window.addEventListener("message", (messageEvent) => {
        if (
            messageEvent.data.origin &&
            messageEvent.data.origin === "company-name-iframe"
        ) {
            const iframe = document.getElementById(messageEvent.data.id)
            // this is the only way to ensure that the height of the iframe container matches its body height
            iframe.style.height = `${messageEvent.data.height}px`
            // by default, the iframe will not expand to fill the width of its parent
            iframe.style.width = "100%"
            // the iframe should take precedence over all pointer events of its immediate parent
            // (you can still click around the iframe to segue, for example, but all content of the iframe
            // will act like it has been directly inserted into the DOM)
            iframe.style.pointerEvents = "all"
            // by default, iframes have an ugly web-1.0 border
            iframe.style.border = "none"
        }
    })
}

// in component that renders n iframes
<iframe
    id={`${props.id}-iframe`}
    src={(() => {
        const html = [`data:text/html,${encodeURIComponent(props.thirdLineData)}`]
        if (window.parent.postMessage) {
            html.push(
                `
                <script>
                window.onload = function(event) {
                    window.parent.postMessage(
                        {
                            height: document.body.scrollHeight,
                            id: "${props.id}-iframe",
                            origin: "company-name-iframe",
                        },
                        "${window.location.origin}"
                    );
                };
                </script>
                `
            )
        }

        return html.join("\n")
    })()}
    onLoad={(event) => {
        // if the browser does not enforce a cross-origin policy,
        // then just access the height directly instead
        try {
            const { target } = event
            const contentDocument = (
                target.contentDocument ||
                // Earlier versions of IE or IE8+ where !DOCTYPE is not specified
                target.contentWindow.document
            )
            if (contentDocument) {
                target.style.height = `${contentDocument.body.scrollHeight}px`
            }
        } catch (error) {
            const expectedError = (
                `Blocked a frame with origin "${window.location.origin}" ` +
                `from accessing a cross-origin frame.`
            )
            if (error.message !== expectedError) {
                /* eslint-disable no-console */
                console.err(
                    `An error (${error.message}) ocurred while trying to check to see ` +
                    "if the inner iframe is accessible or not depending " +
                    "on the browser cross-origin policy"
                )
            }
        }
    }}
/>