it-swarm.com.de

Lassen Sie iframe die Höhe automatisch an den Inhalt anpassen, ohne die Bildlaufleiste zu verwenden?

Zum Beispiel:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

Ich möchte, dass es in der Lage ist, die Höhe an den Inhalt anzupassen, ohne scrollen zu müssen.

461
akashbc

Fügen Sie dies zu Ihrem Abschnitt <head> hinzu:

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

Und ändern Sie Ihren Iframe in:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

Wie zu finden auf Sitepoint Diskussion .

608
hjpotter92

Sie können diese Bibliothek verwenden, die sowohl die Größe Ihres Iframes anfangs korrekt als auch die richtige Größe beibehält, indem Sie feststellen, wann immer sich die Größe des Iframe-Inhalts ändert (entweder durch regelmäßiges Einchecken eines setInterval oder über MutationObserver ) und ändern Sie die Größe.

https://github.com/davidjbradshaw/iframe-resizer

Dies funktioniert sowohl mit domänenübergreifenden als auch mit domänengleichen iframes.

83
user2684310

Hier ist eine kompakte Version:

<iframe src="hello.html"
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
45
Chong Lip Phang

Der Vorschlag von hjpotter92 funktioniert nicht in Safari! Ich habe eine kleine Änderung am Skript vorgenommen, damit es jetzt auch in Safari funktioniert.

Nur die vorgenommene Änderung setzt die Höhe bei jedem Ladevorgang auf 0 zurück, damit einige Browser die Höhe verringern können.

Fügen Sie dies zum <head> Tag hinzu:

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

Fügen Sie Ihrem iframe wie folgt das folgende onload Attribut hinzu

<iframe onload='resizeIframe(this)'></iframe>
37
Allan P

Die hjpotter92 Antwort funktioniert in bestimmten Fällen gut genug, aber ich fand, dass der Iframe-Inhalt in Firefox und IE oft von unten abgeschnitten wurde, während er in Chrome in Ordnung ist.

Das Folgende funktioniert gut für mich und behebt das Beschneidungsproblem. Der Code wurde unter http://www.dyn-web.com/tutorials/iframes/height/ gefunden. Ich habe eine kleine Änderung vorgenommen, um das Onload-Attribut aus dem HTML-Code zu entfernen. Fügen Sie den folgenden Code nach dem HTML-Code <iframe> und vor dem schließenden Tag </body> ein:

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>

Ihr iframe HTML:

<iframe id="ifrm" src="some-iframe-content.html"></iframe>

Beachten Sie, dass Sie, wenn Sie es vorziehen, Javascript in den <head> des Dokuments aufzunehmen, wieder ein Inline-onload -Attribut im iframe -HTML verwenden können, wie im dyn-web Webseite.

13
Jimadine

Vermeiden Sie Inline-JavaScript. Sie können eine Klasse verwenden:

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>

Und referenziere es mit jQuery:

$('.iframe-full-height').on('load', function(){
    this.style.height=this.contentDocument.body.scrollHeight +'px';
});
12
rybo111

mit der Methode . contents () von jQuery können wir die unmittelbaren untergeordneten Elemente des Elements im DOM-Baum durchsuchen.

jQuery:

$('iframe').height( $('iframe').contents().outerHeight() );

Denken Sie daran, dass der Hauptteil der Seite innerhalb des Iframes seine Höhe haben muss

CSS:

body {
  height: auto;
  overflow: auto
}
4
Nathalia Xavier

Das funktioniert bei mir (meistens).

Fügen Sie dies am Ende Ihrer Seite ein.

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="application/javascript" src="/script/jquery.browser.js">
</script>

<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>

<script type="application/javascript"> 
  jQuery('iframe').iframeAutoHeight();
  $(window).load(
      function() {
          jQuery('iframe').iframeAutoHeight();  
      }
  );

  // for when content is not html e.g. a PDF
  function setIframeHeight() {
      $('.iframe_fullHeight').each(
          function (i, item) {
              item.height = $(document).height();
          }
      );
  };

  $(document).ready( function () {
      setIframeHeight();
  });
  $(window).resize( function () {
      setIframeHeight();
  });
</script> 

Die erste Hälfte ist von ??? und funktioniert, wenn sich HTML im iframe befindet. In der zweiten Hälfte wird der Iframe auf die Seitenhöhe (nicht auf die Inhaltshöhe) festgelegt, wenn die Iframes-Klasse iframe_fullHeight lautet. Sie können dies verwenden, wenn der Inhalt ein PDF oder ähnliches ist, aber Sie müssen die Klasse festlegen. Kann auch nur verwendet werden, wenn die volle Höhe angemessen ist.

Hinweis: Aus irgendeinem Grund wird bei einer Neuberechnung nach einer Größenänderung des Fensters die Höhe falsch angegeben.

2
ctrl-alt-delor

Versuchen Sie dies für IE11

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
2
Lucky

Das funktioniert bei mir (auch mit mehreren iframes auf einer Seite):

$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
2
user2992220
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
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üge dies deinem iframe hinzu: onload = "autoResize ('youriframeid')"

1
Simon

Ich habe es mit AngularJS gemacht. Angular hat kein ng-load, aber ein 3rd-Party-Modul wurde erstellt; Installieren Sie es mit der folgenden Laube oder finden Sie es hier: https://github.com/andrefarzat/ng-load

Holen Sie sich die ngLoad-Direktive: bower install ng-load --save

Richten Sie Ihren Iframe ein:

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>

Controller resizeIframe-Funktion:

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
0
Charles Naccio

In der Vergangenheit hatte ich Probleme, iframe.onload für dynamisch erstellte iframes aufzurufen. Daher habe ich die iframe-Größe folgendermaßen festgelegt:

iFrame View

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);

Hauptansicht

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}

(Dies funktioniert nur, wenn sich beide Ansichten in derselben Domäne befinden.)

0
Owen