Machen iframe automatisch Höhe entsprechend dem Inhalt ohne Scrollbar anpassen?

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.

David Cain
Bearbeitete Frage 8. März 2013 в 7:21
Programmierung
iframe html scrollbar height
2. April 2012 в 11:45
16 Aufrufe
Lösung

Fügen Sie dies zu Ihrem Abschnitt `` hinzu:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

Und ändern Sie Ihren iframe wie folgt:

Wie auf sitepoint discussion gefunden.

hjpotter92
Bearbeitete Antwort 10. Januar 2018 в 9:11
Kommentare (31)

Der Vorschlag 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 besteht darin, die Höhe bei jedem Laden auf 0 zurückzusetzen, damit einige Browser die Höhe verringern können.

Fügen Sie dies zum `` Tag hinzu:

<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 das folgende "onload"-Attribut zu Ihrem iframe hinzu, etwa so

rybo111
Bearbeitete Antwort 29. November 2015 в 5:26
Kommentare (7)
 
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}

fügen Sie dies zu Ihrem iframe hinzu: onload="autoResize('youriframeid')"

Neil Thompson
Bearbeitete Antwort 9. Februar 2015 в 4:30
Kommentare (0)