Tonis Blog

Vor einigen Wochen bekam ich den Auftrag eine Forensoftware in ein Internet-Portal einzubetten. Dies geschieht sinnvollerweise mit einem Iframe.

Nun eigentlich kein Problem, aber der Teufel steckt im Detail …

Automatische Breitenanpassung ist einfach: Der iFrame bekommt das Attrribut ‘width=”100%”‘

Die Anpassung der Höhe ist aber schwieriger. Man muss bedenken, dass sich die Höhe des Fensters bei der Arbeit mit der im Iframe eingebetteten Applikation permanent ändert. Bei einem Forum : Die Fensterhöhe der Forenübersicht wird sicher unterschiedlich zur Ansicht eines beliebigen Artikels sein. Und bei verschiedenen Artikeln ist die Höhe sicher auch jedesmal anders.

Eine Antwort darauf ist die Angabe eine festen Höhe im Iframe. Also zum Beispiel mit ‘height=”500px”‘. Passt diese Größe nicht, dann werden durch die Default-Voreinstellung ’scrolling=”auto”‘ automatisch Scrollbars (Bildlaufleisten in deutsch) erzeugt. Schön ist etwas anderes …

Was also tun ? Die andere Antwort ist ein JavaScript-Event an den Iframe zu “hängen”. Dieser wird bei jeder Größenänderung des eingebetteten Applikations aktiviert und kann dazu benutzt werden, die Größe des Iframes entsprechend zu ändern.

Klingt doch gut, nicht wahr ? Leider ist es nicht so ganz einfach, weil das Document Object Model (DOM) des Iframes auf jedem Browser anders ist. (DOM : damit kann man jedes Element einer HTML-Seite von z.B. JavaScript adressieren und ändern; z.B. auch die Höhe des Iframes)

Nun nachdem ich durch diese Hölle der Inkompatibilitäten gegangen bin, ist ein Script entstanden, das ich mit der Welt teilen möchte. Hoffe damit einigen Web-Entwicklern dieser Welt einige graue Haare zu ersparen …

Iframe selbst im html (bzw. php-Script):

<div>
<!-- SX, Kejr : Iframe for forum ; height will be adapted as best -->
<!-- as possible to forum height -->
<!-- width is 100% of forum width ; after stripping of the unwanted -->
<!-- parts, that should be reasonable -->
<!-- Noframe-Text/Link required mainly for Google&Co -->
<iframe onload="javascript:parent.iFrameHeight('forum','forum');"
id="forum" name="forum"
src="../forum/"
width="100%"
scrolling="auto"
align="top"
frameborder="0"
class="wrapper">
<p>Ihr Webbrowser kann leider keine eingebetteten Frames anzeigen:
Sie k&ouml;nnen jedoch das eingebettete Forum &uuml;ber den folgenden Verweis
aufrufen: <a href="../forum/" target="_forum">Forum</a></p>
</iframe>
<!-- EOF : SX, Kejr -->

javascript:parent.iFrameHeight(‘forum’,'forum’); ist der Event, der am Iframe hängt und bei jeder Aktion IN der im Iframe eingebetteten Applikation aufgerufen wird …

Und so sieht die JavaScript-Event-Funktion aus :

<!-- SX, Kejr : Jscript-Funtion to autoadapt to forum size -->
<!-- will only work if we are on same domain !! -->
<script language="javascript" type="text/javascript">
function iFrameHeight(n,id) {
var h = 0;
if ( !document.all ) {
// this one seems now finally to work on any browser !
// tested with firefox, IE 7 (see below), opera, chrome and Windows Safari
h = document.getElementById(id).contentDocument.body.offsetHeight;
document.getElementById(id).style.height = h + 0 + 'px';
} else if( document.all ) {
// the IE way
h = document.frames(n).document.body.scrollHeight;
document.getElementById(id).style.height = h + 0 + 'px';
}
}
</script>
<!-- EOF: SX, Kejr -->

So ich hoffe ich kann mit diesem Code-Snippet dem einen oder anderen helfen. Diese Komplett-Lösung habe ich nämlich über Google nicht gefunden. Nur Einzellösungen für bestimmte Browser.

admin Allgemeines, Open Source, Web 2.0 Iframe, JavaScript, Webentwicklung