Einen Iframe so gestalten, dass er vertikalen Platz einnimmt
-
09-06-2019 - |
Frage
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?
Lösung
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
.
Andere Tipps
Die Problemumgehung besteht darin, es nicht zu verwenden <iframe>
und Code serverseitig vorverarbeiten.
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.
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.
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>