Ich habe mich schon eine Weile gefragt. Hier ist ein Proof of Concept (beachten Sie, dass er das Problem der Entfernung von Scrollbalken aus Iframes nicht löst).
Fügen Sie ein Skript-Tag zum Beitrag hinzu, den Sie einbetten:
<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' // Verwenden Sie eine eindeutige Kennung, wenn Sie mehrere Iframes haben
}, '*'); // Erwägen Sie die Angabe der übergeordneten Domäne aus Sicherheitsgründen
}
// Senden Sie die anfängliche Höhe
window.onload = sendHeight;
// Optional: Höhe bei Größenänderung oder anderen Ereignissen aktualisieren
window.onresize = sendHeight;
</script>
Ich verwende die Kennung "zalgFrame" im Skript.
In Ihrem Discourse-Theme:
<script type="text/discourse-plugin" version="1.29.0">
let iframeHeight, iframeId;
window.addEventListener('message', (event) => {
if (event.origin !== "http://wp-discourse.test") return; // meine Testdomäne, ändern Sie sie zu Ihrer Domäne oder kommentieren Sie sie aus
// erhält die Iframe-Höhe, die von `wp-discourse.test` übergeben wird, und bestätigt, dass die iframeId mit der dort gesetzten iframeID übereinstimmt
if (event.data.iframeHeight && event.data.iframeId === 'zalgFrame') {
// besuchen Sie die Discourse-Seite mit dem Iframe mit geöffneter Konsole
// Sie sollten aktualisierte Höhen sehen, die von der übergeordneten Website gesendet werden, während Sie das Fenster vergrößern/verkleinern
console.log("we got an event:" + event.data.iframeHeight);
iframeHeight = event.data.iframeHeight;
iframeId = event.data.iframeId;
}
}, false);
</script>
In einem Discourse-Beitrag:
<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>
Es ist also möglich, die tatsächliche Höhe des gerenderten Iframes vom übergeordneten Fenster aus zu erhalten.
Ich weiß nicht, wie ich die Höhe aus den Daten des Event-Listeners in einen Aufruf von api.decorateCookedElement bekomme. Ich bin mir nicht sicher, ob das überhaupt funktionieren würde, um die vertikale Scrollleiste bei langen Iframes zu entfernen. Wenn ich versuche, eine große Höhe (1600px) fest in das iframe-Element zu kodieren, habe ich immer noch eine Scrollleiste.
Bearbeiten: Der Vollständigkeit halber:
<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;
// basierend auf der Annahme, dass nur 1 Iframe im data-zalgFram Div verpackt ist
let iframe = e.querySelector("[data-zalgFrame] iframe");
if (iframe) {
iframe.style.height = `${iframeHeight}px`;
}
// nach dem Setzen der tatsächlichen gerenderten Höhe des Iframes
// entfernen Sie den Event-Listener
window.removeEventListener("message", handleMessage, false);
}
}
window.addEventListener("message", handleMessage, false);
},
{ id: "component-id", onlyStream: true }
);
</script>
Für Höhen über ~1000px scheint es keine Möglichkeit zu geben, eine von Discourse hinzugefügte Scrollleiste zu vermeiden, daher empfehle ich den Ansatz nicht.
Ich denke, die Antwort auf die OP ist, dass es irgendwie möglich ist, aber wahrscheinlich nicht viel bewirkt. (Außer dass ich etwas über die Methode window.postMessage() gelernt habe 
