Für die Einbindung eines Formulares möchte ich gerne ein iframe in einem Artikel einbinden, welches je nach angezeigtem Inhalt die Höhe verändert.
Bei einem ersten Versuch konnte ich fast erfolgreich die folgende Lösung von sfxonline.de umsetzen:
Nach dem -Tag folgenden Code auf der Ursprungsseite einbinden:
<body onLoad="resizeParent();">
<script type="text/javascript">
function resizeParent() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setIframeHeight", height], "*");
}
</script>
</body>
Danach in der CMS-Seite das iframe wie folgt eingebunden:
<iframe id="superFrame" src="..." style="width: 100%; border: none;" onload="resizeIframe(this)" scrolling="no"></iframe>
<script type="text/javascript">
function resizeIframe(iframe) {
if(iframe) {
iframe.height = '';
iframe.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
}
</script>
Allerdings wird einer Größenänderung des Formular nach dem auswählen der Dateien für den upload der Inhalt etwas länger und die automatische Größenänderung des iframe spielt dann nicht mit,sodass die Schaltfläche zum senden hinter dem Footer verschwindet.
Eine 2. mögliche Lösung mit einer selbstständigen Abfrage findet sich auf iFrame-Höhe an dessen Inhalt automatisch anpassen v2 - Professor Web - Das Webdesigner Portal & Blog
<script type="text/javascript">
var framefenster = document.getElementsByTagName("iFrame");
var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
function autoresize_frames() {
for (var i = 0; i < framefenster.length; ++i) {
if(framefenster[i].contentWindow.document.body){
var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
if(document.all && !window.opera) {
framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
}
framefenster[i].style.height = framefenster_size + 'px';
}
}
}
</script>
Durch den Abfrageintervall von 400ms sollte demnach regelmäßig die Größe auf den Inhalt anpassen, tut es aber nicht.
Steht smarty dem ganzen vielleicht doch im Weg, oder was kann ich ändern um die Größenanpassung erfolgreich umzusetzen?