Einen Iframe so gestalten, dass er vertikalen Platz einnimmt

Question

Ich hätte gerne eine iframe Nehmen Sie so viel vertikalen Platz ein, wie zum Anzeigen des Inhalts erforderlich ist, und zeigen Sie keine Bildlaufleiste an.Ist das überhaupt möglich?

Gibt es Workarounds?

Answer 1

Dies sollte das einstellen IFRAME Höhe zur Höhe seines Inhalts:

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>

Vielleicht möchten Sie hinzufügen scrolling="no" zu deinem IFRAME um die Bildlaufleisten auszuschalten.

bearbeiten: Hoppla, ich habe vergessen zu deklarieren the_height.

Answer 2

Die Problemumgehung besteht darin, es nicht zu verwenden <iframe> und Code serverseitig vorverarbeiten.

Answer 3

Schauen Sie sich auch diesen Thread an: Wie passt die DiggBar die Höhe ihres Iframes dynamisch an, basierend auf Inhalten, die nicht zu ihrer Domain gehören?.

Es befasst sich mit der gleichen Frage.

Answer 4

Dieses CSS-Snippet sollte die vertikale Bildlaufleiste entfernen:

body {
  overflow-x: hidden;
  overflow-y: hidden;
} 

Ich bin mir noch nicht sicher, ob es so viel vertikalen Platz einnimmt, wie es benötigt, aber ich werde sehen, ob ich es nicht hinbekomme.

Answer 5

Hinzufügen eines DOCTYPE Erklärung an die IFRAME Das Quelldokument hilft dabei, den korrekten Wert aus der Zeile zu berechnen

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight

sehen W3C DOCTYPE für Beispiele

Ich hatte sowohl mit IE als auch mit FF Probleme beim Rendern iframe Dokument im „Macken“-Modus, bis ich das hinzugefügt habe DOCTYPE.

FF/IE/Chrome-Unterstützung:Die .scrollHeight funktioniert nicht mit Chrome, daher habe ich ein Javascript-Beispiel erstellt, bei dem jQuery zum Festlegen aller Elemente verwendet wird IFRAME Höhen auf einer Seite basierend auf dem Iframes-Inhalt.NOTIZ:Dies gilt für Referenzseiten innerhalb Ihrer aktuellen Domain.

<script type="text/javascript">
    $(document).ready(function(){
        $('iframe').each(function(){
            var context = $(this);
            context.load(function(event){ // attach the onload event to the iframe  
                var body = $(this.contentWindow.document).find('body');
                if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                    context.height($(body.get(0)).height() + 20);
                } else {
                    context.hide(); // hide iframes with no contents
                }
            });
        });
    });
</script>