이 문제에 대해 꽤 오래前から 궁금해하고 있었습니다. 여기 개념 증명(PoC)을 하나 공유합니다. (참고로 이 방법은 iframe에서 스크롤바를 제거하는 문제는 해결하지 못합니다.)
임베드하려는 게시물에 다음 스크립트 태그를 추가하세요:
<script>
function sendHeight() {
const body = document.body,
html = document.documentElement;
const height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
window.parent.postMessage({
'iframeHeight': height,
'iframeId': 'zalgFrame' // 여러 iframe이 있는 경우 고유한 식별자를 사용하세요
}, '*'); // 보안을 위해 부모 도메인을 지정하는 것을 고려하세요
}
// 초기 높이 전송
window.onload = sendHeight;
// 선택 사항: 리사이즈 또는 기타 이벤트 발생 시 높이 업데이트
window.onresize = sendHeight;
</script>
스크립트에서 식별자로 "zalgFrame"을(를) 사용하고 있습니다.
Discourse 테마에서:
<script type="text/discourse-plugin" version="1.29.0">
let iframeHeight, iframeId;
window.addEventListener('message', (event) => {
if (event.origin !== "http://wp-discourse.test") return; // 제 테스트 도메인입니다. 본인의 도메인으로 업데이트하거나 주석 처리하세요.
// `wp-discourse.test`에서 전달된 iframe 높이를 가져오고, 거기서 설정한 iframeID와 iframeId가 일치하는지 확인합니다.
if (event.data.iframeHeight && event.data.iframeId === 'zalgFrame') {
// 콘솔을 열고 iframe이 포함된 Discourse 페이지를 방문하세요.
// 창을 리사이즈할 때 부모 사이트에서 업데이트된 높이가 전송되는 것을 볼 수 있습니다.
console.log("we got an event:" + event.data.iframeHeight);
iframeHeight = event.data.iframeHeight;
iframeId = event.data.iframeId;
}
}, false);
</script>
Discourse 게시물에서:
<div data-iframe-test-one>
<iframe src="http://wp-discourse.test/zalg_iframe/this-is-a-test-this-is-only-a-test/" width="100%" height="1659"></iframe>
</div>
따라서 렌더링된 iframe의 실제 높이를 부모 창에서 가져올 수 있습니다.
하지만 이벤트 리스너의 데이터를 api.decorateCookedElement 호출에 어떻게 전달해야 하는지 모르겠습니다. 또한 긴 iframe의 세로 스크롤바를 제거하는 데 이것이 실제로 작동할지 확실하지도 않습니다. iframe 요소에 큰 높이(1600px)를 하드코딩하여 시도해 보았지만, 여전히 스크롤바가 나타납니다.
수정: 완전성을 위해 추가합니다:
<script type="text/discourse-plugin" version="1.29.0">
api.decorateCookedElement(
(e) => {
let iframeHeight, iframeId;
function handleMessage(event) {
if (event.origin !== "http://wp-discourse.test") return;
if (event.data.iframeHeight && event.data.iframeId === "zalgFrame") {
iframeHeight = event.data.iframeHeight;
iframeId = event.data.iframeId;
// data-zalgFram div로 감싸진 iframe이 하나만 있을 것이라는 가정 하에
let iframe = e.querySelector("[data-zalgFrame] iframe");
if (iframe) {
iframe.style.height = `${iframeHeight}px`;
}
// iframe의 실제 렌더링된 높이를 설정한 후
// 이벤트 리스너를 제거합니다.
window.removeEventListener("message", handleMessage, false);
}
}
window.addEventListener("message", handleMessage, false);
},
{ id: "component-id", onlyStream: true }
);
</script>
높이가 ~1000px을(를) 초과하는 경우, Discourse가 스크롤바를 추가하는 것을 피할 방법이 없어 보이기 때문에 이 접근법을 권장하지 않습니다.
제 생각에는 OP(질문자)에게 대한 답은 "어떤 식으로든 가능하지만, 실제로는 큰 효과를 보지 못할 가능성이 높다"는 것입니다. (다만 window.postMessage() 메서드에 대해 배울 수는 있었습니다 
