it-swarm.com.de

iframe height dynamisieren, basierend auf dem Inhalt von JQUERY/Javascript

Ich lade eine aspx-Webseite in einen iframe. Der Inhalt im Iframe kann eine höhere Höhe als die Höhe des Iframes haben. Der iframe sollte keine Bildlaufleisten haben.

Ich habe einen Wrapper-Tag div im iframe, der im Grunde den gesamten Inhalt enthält. Ich habe etwas jQuery geschrieben, um die Größenänderung durchzuführen:

$("#TB_window", window.parent.document).height($("body").height() + 50);

dabei ist TB_window das div, in dem die Iframe enthalten ist.

body - das body-Tag des aspx im iframe.

Dieses Skript ist an den iframe-Inhalt angehängt. Ich erhalte das TB_window-Element von der übergeordneten Seite. Das funktioniert zwar gut in Chrome, aber das TB_window bricht in Firefox zusammen. Ich bin wirklich verwirrt, warum das passiert.

169
karry

Sie können die Höhe des IFRAME-Inhalts abrufen, indem Sie Folgendes verwenden: contentWindow.document.body.scrollHeight

Nach dem Laden von IFRAME können Sie die Höhe folgendermaßen ändern:

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>   

Dann schließen Sie den Handler am Tag IFRAME folgendermaßen an:

<iframe id="idIframe" onload="iframeLoaded()" ...

Ich hatte vor einiger Zeit eine Situation, in der ich zusätzlich iframeLoaded von IFRAME selbst aufrufen musste, nachdem eine Formular-Übermittlung innerhalb von erfolgte. Sie können dies erreichen, indem Sie in den Inhaltsskripten von IFRAME Folgendes tun:

parent.iframeLoaded();
190
Aristos

Eine etwas verbesserte Antwort auf Aristos ...

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

Dann deklarieren Sie in Ihrem iframe wie folgt:

<iframe onload="resizeIframe(this)" ...

Es gibt zwei kleinere Verbesserungen:

  1. Sie müssen das Element nicht über document.getElementById abrufen, da Sie es bereits im onload-Callback haben.
  2. Sie müssen den iframe.height = "" nicht festlegen, wenn Sie ihn in der nächsten Anweisung erneut zuweisen möchten. Dies verursacht tatsächlich einen Aufwand, wenn Sie sich mit einem DOM-Element befassen.
93
BlueFish

Ich habe festgestellt, dass die akzeptierte Antwort nicht ausreichte, da X-FRAME-OPTIONS: Allow-From in Safari oder Chrome nicht unterstützt wird. Stattdessen mit einem anderen Ansatz, in einer Präsentation von Ben Vinegar von Disqus gefunden. Die Idee ist, dem übergeordneten Fenster einen Ereignis-Listener hinzuzufügen, und dann im Fenster mit window.postMessage ein Ereignis an das übergeordnete Fenster zu senden, in dem es aufgefordert wird, etwas zu tun (Größe des iframe ändern).

Fügen Sie also im übergeordneten Dokument einen Ereignis-Listener hinzu:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

Schreiben Sie im iframe eine Funktion, um die Nachricht zu posten:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

Fügen Sie schließlich im iframe ein onLoad zum body-Tag hinzu, um die Größenänderungsfunktion auszulösen:

<body onLoad="resize();">
50
Marty Mulligan

Füge dies dem iframe hinzu, das hat für mich funktioniert:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

Und wenn Sie jQuery verwenden, versuchen Sie diesen Code:

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
9
Mohit Aneja

Es gibt vier verschiedene Eigenschaften, die Sie anzeigen können, um die Höhe des Inhalts in einem iFrame zu ermitteln.

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

Leider können sie alle unterschiedliche Antworten geben, und diese sind zwischen den Browsern inkonsistent. Wenn Sie den Gehäuserand auf 0 setzen, gibt der document.body.offsetHeight die beste Antwort. Um den korrekten Wert zu erhalten, versuchen Sie diese Funktion. Dies ist der Bibliothek - iframe-resizer entnommen, die auch darauf achtet, dass der iFrame die richtige Größe hat, wenn sich der Inhalt ändert oder die Browsergröße geändert wird.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}
5
David Bradshaw

Nur für den Fall, dass dies jedem hilft. Ich zog meine Haare heraus und versuchte, dies zum Laufen zu bringen, dann bemerkte ich, dass der Iframe einen Klasseneintrag mit Höhe hatte: 100%. Als ich das entfernte, funktionierte alles wie erwartet. Also, bitte überprüfen Sie alle CSS-Konflikte.

2
user8640976

Sie können sich auf verwandte Fragen beziehen - Wie kann ich die Breite und Höhe des iframe wie sein übergeordnetes div festlegen?

Dynamische Höhe einstellen -

  1. Wir müssen mit domänenübergreifenden iFrames und übergeordneten Computern kommunizieren
  2. Dann können wir die Bildlaufhöhe/Inhaltshöhe des Iframes an das übergeordnete Fenster senden

Und Codes - https://Gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

1
Mohan Dere

Anstatt javscript/jquery zu verwenden, ist der einfachste Weg, den ich gefunden habe: 

<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>

Hier ist 1vh = 1% der Browserfensterhöhe. Der theoretisch einzustellende Wert für die Höhe ist 100 Vh, aber praktisch 98 VH haben die Magie getan.

1
PHP-Binod

Um das Stück Fenster hinzuzufügen, das anscheinend unten abgeschnitten zu sein scheint, insbesondere wenn Sie kein Scrollen haben, habe ich Folgendes verwendet:

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }
0
Matt Stacey

Eine etwas verbesserte Antwort auf BlueFish ...

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

Hierbei wird die Höhe des Windows-Bildschirms (Browser, Telefon) berücksichtigt, die sich für responsives Design und Iframes mit großer Höhe eignet. Die Auffüllung steht für die Auffüllung, die Sie über und unter dem Iframe haben möchten, falls der gesamte Bildschirm durchläuft . 

0
Tadej Vengust

Die einfache Lösung besteht darin, die Breite und Höhe des Inhaltsbereichs zu messen und dann diese Werte zur Berechnung des unteren Füllungsprozentsatzes zu verwenden.

In diesem Fall sind die Maße 1680 x 720 px, die Auffüllung unten ist 720/1680 = 0,43 * 100, was 43% ausmacht.

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}
0
loek

Ich fand die Antwort von Troy nicht. Dies ist der gleiche Code, der für ajax überarbeitet wurde:

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});
0
Martin Lester

sie können auch einen sich wiederholenden requestAnimationFrame zu Ihrem resizeIframe hinzufügen (z. B. von @ BlueFishs Antwort), der immer aufgerufen wird, bevor der Browser das Layout malt, und Sie können die Höhe des iframe aktualisieren, wenn sich die Höhe des Iframes geändert hat. z.B. Eingabeformulare, träge geladene Inhalte usw.

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

ihr Rückruf sollte schnell genug sein, um keinen großen Einfluss auf Ihre Gesamtleistung zu haben

0
user2520818
jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
0
Keyur Savsani

Dies ist nützlich, wenn Sie eine Lösung ohne Jquery benötigen. In diesem Fall sollten Sie versuchen, einen Container hinzuzufügen und eine prozentuale Auffüllung festzulegen

HTML-Beispielcode:

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

CSS-Beispielcode:

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}
0
Juan M

Andere Antworten haben bei mir nicht funktioniert, daher habe ich einige Änderungen vorgenommen. Hoffe das wird helfen

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
0
Ravi

Beispiel mit PHP htmlspecialchars () + überprüfe, ob die Höhe existiert und> 0 ist:

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
0
jteks