Zum Beispiel:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>Ich möchte, dass es seine Höhe entsprechend dem Inhalt anpassen kann, ohne dass ein Bildlauf erforderlich ist.
Fügen Sie dies zu Ihrem <head> Abschnitt:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>Und ändern Sie Ihren iframe in diesen:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />Wie gefunden auf Standortgespräch .
Dies funktioniert nicht, wenn der iframe Inhalte von einer anderen Domain enthält, da die Politik der gleichen Herkunft gibt es eine weitere Frage zu SO mit einigen bereichsübergreifenden Lösungen stackoverflow.com/questions/5589756/
Die Lösungen scheinen nicht zu funktionieren, wenn der Inhalt des iframe eine Höhenänderung durch js hat (z.B. ein Slider)
Sie können diese Bibliothek verwenden, die sowohl die Größe Ihres iframe anfangs korrekt angibt als auch die richtige Größe beibehält, indem sie erkennt, wenn sich die Größe des iframe-Inhalts ändert (entweder durch regelmäßige Überprüfung in einer setInterval oder über MutationObserver ) und ändern Sie die Größe.
https://github.com/davidjbradshaw/iframe-resizer
Es gibt auch eine React-Version.
https://github.com/davidjbradshaw/iframe-resizer-react
Dies funktioniert sowohl mit domänenübergreifenden als auch mit domänengleichen iframes.
Hinweis: bei der Verwendung für Cross-Domain, erfordert Sie in der Lage sein, eine js-Datei in den Iframe injizieren... Scheint nicht wie eine praktikable Option, wenn Sie die iframe-Quelle nicht kontrollieren.
Ich habe dies nicht mit anderen Browsern ausprobiert, aber bei Chrome musste ich 10px hinzufügen, da sonst eine vertikale Bildlaufleiste angezeigt wurde. Ich tat this.style.height=(this.contentDocument.body.scrollHeight + 15) + 'px'; nur um sicherzustellen, dass es gut aussieht.
Diese Lösung, bei der ein "max-height:400px !important;" hinzugefügt wird, um die maximale Höhe festzulegen, ist für meinen Fall perfekt.
Es sollte onload="this.style.height = this.contentWindow.document.body.scrollHeight + 'px';" sein
Die Anregung von hjpotter92 funktioniert nicht in Safari! Ich habe eine kleine Anpassung am Skript vorgenommen, so dass es jetzt auch in Safari funktioniert.
Die einzige Änderung, die vorgenommen wurde, ist das Zurücksetzen der Höhe auf 0 bei jedem Laden, um einigen Browsern die Möglichkeit zu geben, die Höhe zu verringern.
Dies hinzufügen zu <head> Tag:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>Und fügen Sie Folgendes hinzu onload Attribut zu Ihrem iframe hinzufügen, etwa so
<iframe onload='resizeIframe(this)'></iframe>
Dies funktioniert auch nicht, wenn der Inhalt des iframe aus dem srcdoc-Attribut stammt. Die Höhe wird falsch eingestellt.
Danke, das hätte wahrscheinlich ein Kommentar/Vorschlag zu hjpotters Beitrag sein sollen...
Vermeiden Sie Inline-JavaScript; Sie können eine Klasse verwenden:
<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>Und referenzieren Sie es mit jQuery:
$('.iframe-full-height').on('load', function(){
this.style.height=this.contentDocument.body.scrollHeight +'px';
}); CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
2 Stimmen
Dies kann über CSS erfolgen. Es gibt ein Konzept in CSS namens Media-Queries, bei dem die Größe des Inhalts entsprechend der Bildschirmgröße angepasst wird.
1 Stimmen
Angular iFrame Auto-Höhe: gitlab.com/reduardo7/angular-iframe-auto-height
5 Stimmen
"Angular ", d.h., Javascript erforderlich? Mit anderen Worten, man kann dies nicht mit seitenübergreifenden Iframes tun (aufgrund von Cross-Site-Scripting-Einschränkungen), ist das richtig? Wie @clankill3r vorschlägt, zeigt dies die Notwendigkeit für eine reine CSS-Lösung für dieses Problem!