automatisch die Höhe eines iFrames - cross-browsers - anpassen

Die Same-Origin-Policy verhindert, dass man Inhalte fremder Seiten beeinflussen kann. An sich sehr sinnvoll, aber in diesem Fall, indem es nur um die Anpassung der Höhe geht, nervig.

Voraussetzung.
Zugriff auf beide Domains, denn man muss auf beiden Seiten ein Java-Script einsetzen. Die Scripte funktionieren bis zum IE8, der IE7 lässt sich nur mit einer css-Anweisung auf eine Default-Höhe einstellen. Aber Betrachter, die den IE7 verwenden, beschweren sich auch nicht über Scroll-Balken.

Script 1. Child (iFrame - head)

<script type="text/javascript">

function postSize(e){ 
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); 
if (typeof target != "undefined" && document.body.scrollHeight)
target.postMessage(document.getElementById(" - ID-Element, das alle Inhalte umschliesst- ").scrollHeight+60, "*");
}

if (window.addEventListener) {
window.addEventListener("load", postSize, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", postSize, false);
}

</script> 

--- +60 erhöht diesen Bereich um ein paar Pixel.hier kann ein beliebiger Wert beim testen eingesetzt werden.

Script 2. Parent (Ende des Body Bereiches)

<script type="text/javascript">
function receiveSize(e){ 
if (e.origin === "http://www.Urpsungs-Domain-des-iFrames.de")    
document.getElementById("ID-des-iFrames").style.height = e.data +"px";
}

if (window.addEventListener) {
window.addEventListener("message", receiveSize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveSize, false);
}
</script>

Dieser Trick wurde von Alf Eaton 2008 veröffentlicht:
Link zur Seite


Weitere Methode basierend umgesetzt mit jQuery:
Link zur Seite 



 

Zurück

Einen Kommentar schreiben