Me he estado preguntando sobre esto durante un tiempo. Aquí hay una prueba de concepto (ten en cuenta que no resuelve el problema de eliminar las barras de desplazamiento de los iframes).
Agrega una etiqueta de script a la publicación que estás incrustando:
<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' // Usa un identificador único si tienes varios iframes
}, '*'); // Considera especificar el dominio padre por seguridad
}
// Envía la altura inicial
window.onload = sendHeight;
// Opcional: Actualiza la altura al redimensionar u otros eventos
window.onresize = sendHeight;
</script>
Estoy usando el identificador "zalgFrame" en el script.
En tu tema de 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; // mi dominio de prueba, actualízalo a tu dominio o coméntalo
// obtiene la altura del iframe que se pasa desde `wp-discourse.test` y confirma que iframeId coincide con el iframeID que establecí allí
if (event.data.iframeHeight && event.data.iframeId === 'zalgFrame') {
// visita la página de Discourse con el iframe con tu consola abierta
// deberías ver alturas actualizadas que se envían desde el sitio padre a medida que redimensionas la ventana
console.log("recibimos un evento:" + event.data.iframeHeight);
iframeHeight = event.data.iframeHeight;
iframeId = event.data.iframeId;
}
}, false);
</script>
En una publicación de 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>
Así que es posible obtener la altura real del iframe renderizado desde la ventana padre.
No sé cómo obtener la altura de los datos del listener de eventos en una llamada a api.decorateCookedElement. No estoy seguro de que eso funcione para eliminar la barra de desplazamiento vertical de los iframes largos. Si intento codificar una altura grande (1600px) en el elemento iframe, todavía termino con una barra de desplazamiento.
Editar: por completitud:
<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;
// basado en la suposición de que solo habrá 1 iframe envuelto en el div data-zalgFram
let iframe = e.querySelector("[data-zalgFrame] iframe");
if (iframe) {
iframe.style.height = `${iframeHeight}px`;
}
// después de establecer la altura real renderizada del iframe
// elimina el listener de eventos
window.removeEventListener("message", handleMessage, false);
}
}
window.addEventListener("message", handleMessage, false);
},
{ id: "component-id", onlyStream: true }
);
</script>
Para cualquier altura superior a ~1000px, no parece haber forma de evitar que Discourse agregue una barra de desplazamiento, por lo que no recomiendo el enfoque.
Creo que la respuesta a la OP es que es algo posible, pero probablemente no logra mucho. (Excepto que aprendí sobre el método window.postMessage() 