Passen Sie die Breite und Höhe des iframe an den Inhalt an

Browserübergreifendes jQuery-Plug-In .

Cross-Browser, domänenübergreifend library, das mutationObserver verwendet, um die Größe von iFrame an den Inhalt anzupassen, und postMessage für die Kommunikation zwischen iFrame und der Host-Seite. Funktioniert mit oder ohne jQuery.

Alle bisher gegebenen Lösungen machen nur eine einmalige Größenänderung aus. Sie erwähnen, dass Sie die Größe des iFrame ändern möchten, nachdem der Inhalt geändert wurde. Dazu müssen Sie eine Funktion innerhalb des iFrame ausführen (sobald der Inhalt geändert wurde, müssen Sie ein Ereignis auslösen, um anzugeben, dass sich der Inhalt geändert hat).

Ich blieb eine Zeitlang damit stecken, da der Code im iFrame auf das DOM im iFrame beschränkt war (und der iFrame nicht bearbeitet werden konnte), und der außerhalb des iFrame ausgeführte Code steckte mit dem DOM außerhalb des iFrame (und konnte nicht ein Ereignis aus dem iFrame holen).

Die Lösung kam von der Entdeckung (mithilfe eines Kollegen), dass jQuery mitgeteilt werden kann, welches DOM verwendet werden soll. In diesem Fall das DOM des übergeordneten Fensters.

Als solcher macht Code wie dieser, was Sie brauchen (wenn er im iFrame ausgeführt wird):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

einzeilerlösung für Einbettungen: Beginnt mit einer minimalen Größe und vergrößert sich auf die Inhaltsgröße. Skript-Tags sind nicht erforderlich.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

Wenn der iframe-Inhalt aus derselben Domäne stammt, sollte dies großartig funktionieren. Es erfordert jedoch jQuery.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Um die Größe dynamisch zu ändern, können Sie Folgendes tun:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Dann fügen Sie auf der Seite, die der iframe lädt, Folgendes hinzu:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

Hier ist eine Cross-Browser-Lösung, wenn Sie jQuery nicht verwenden möchten:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

Ich verwende diesen Code, um die Höhe aller iframes (mit der Klasse autoHeight) beim Laden auf die Seite automatisch anzupassen. Getestet und es funktioniert in IE, FF, Chrome, Safari und Opera.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

Nachdem ich alles auf der Erde ausprobiert habe, funktioniert das wirklich für mich.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

Hier sind mehrere Methoden:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

UND EINE ANDERE ALTERNATIVE

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

SCROLLING MIT 2 ALTERNATIVEN, WIE OBEN ENTWICKELT

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

HACK MIT ZWEITEM CODE

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Um die Bildlaufleisten des iFrame auszublenden, wird das übergeordnete Element "überlauf: ausgeblendet", um die Bildlaufleisten auszublenden. Der iFrame kann bis zu 150% Breite und Höhe erreichen, wodurch die Bildlaufleisten außerhalb der Seite erzwungen werden. Bei Scrollbalken kann nicht erwartet werden, dass der iframe die Seitengrenzen überschreitet. Dadurch werden die Bildlaufleisten des iFrame mit voller Breite ausgeblendet!

quelle: set iframe auto height

Dies ist eine solide Beweislösung

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

die html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

Ich habe die großartige Lösung von Garnaph oben leicht modifiziert. Es schien, als habe seine Lösung die Größe des Iframes entsprechend der Größe vor dem Ereignis geändert. Für meine Situation (E-Mail-Übermittlung über einen Iframe) musste die Höhe des Iframes direkt nach der Übergabe geändert werden. Zeigen Sie zum Beispiel Validierungsfehler oder eine "Danke" -Meldung nach der Übermittlung an. 

Ich habe gerade die verschachtelte click () - Funktion entfernt und in meine iframe-HTML-Datei eingefügt:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

Arbeitete für mich, aber nicht sicher über die Cross-Browser-Funktionalität.

alle können nicht mit den oben genannten Methoden arbeiten.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64

Wenn Sie sowohl den IFRAME-Inhalt als auch das übergeordnete Fenster steuern können, benötigen Sie den iFrame Resizer .

Diese Bibliothek ermöglicht die automatische Größenanpassung der Höhe und Breite von gleichen und domänenübergreifenden iFrames, um sie an den enthaltenen Inhalt anzupassen. Es bietet eine Reihe von Funktionen zur Behebung der häufigsten Probleme bei der Verwendung von iFrames. Dazu gehören:

• Höhe und Breite der Größe des iFrame an die Inhaltsgröße anpassen.
• Funktioniert mit mehreren und verschachtelten iFrames.
• Domänenauthentifizierung für domänenübergreifende iFrames.
• Bietet eine Reihe von Berechnungsmethoden für die Seitengröße, um komplexe CSS-Layouts zu unterstützen.
• Erkennt Änderungen am DOM, die dazu führen können, dass die Seitengröße mithilfe von MutationObserver geändert wird.
• Erkennt Ereignisse, bei denen die Größe der Seite geändert werden kann (Fenstergrößenänderung, CSS-Animation und -Übergang, Ausrichtungsänderung und Mausereignisse).
• Vereinfachtes Messaging zwischen iFrame und Host-Seite über postMessage.
• Korrekturen in Seitenlinks in iFrame und Unterstützung von Links zwischen der iFrame- und der übergeordneten Seite.
• Stellt benutzerdefinierte Größen- und Bildlaufmethoden bereit.
• Macht die übergeordnete Position und die Größe des Ansichtsfensters für den iFrame verfügbar.
• Arbeitet mit ViewerJS zur Unterstützung von PDF - und ODF-Dokumenten.
• Fallback-Unterstützung bis IE8.

Nach einigem Experimentieren fand ich eine andere Lösung. Ich habe ursprünglich den als "beste Antwort" markierten Code auf diese Frage ausprobiert und es hat nicht funktioniert. Meine Vermutung ist, dass mein iframe in meinem Programm zu der Zeit dynamisch generiert wurde. Hier ist der Code, den ich verwendet habe (es hat für mich funktioniert):

Javascript in dem geladenen iframe:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

Es ist notwendig, der Höhe 4 oder mehr Pixel hinzuzufügen, um Bildlaufleisten zu entfernen (einige seltsame Fehler/Auswirkungen von Iframes). Die Breite ist noch unbekannter, Sie können sicher die Breite des Körpers um 18 Pixel erhöhen. Stellen Sie außerdem sicher, dass Sie die CSS für den Iframe-Body angelegt haben (unten).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Hier ist das HTML für den iframe:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Hier ist der gesamte Code in meinem iframe:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

Ich habe Tests in Chrom und ein wenig Firefox (in Windows XP) durchgeführt. Ich habe noch weitere Tests zu erledigen, also sagen Sie mir bitte, wie das für Sie funktioniert.

Ich fand diesen Resizer, um besser zu funktionieren:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Beachten Sie, dass das Stilobjekt entfernt wird.

Für den Fall, dass jemand hierherkommt: Ich hatte ein Problem mit den Lösungen, als ich divs aus dem iframe entfernte - der iframe wurde nicht kürzer.

Es gibt ein Jquery-Plugin, das die Aufgabe erfüllt:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

In jQuery ist dies die beste Option für mich, die mir wirklich hilft !! Ich warte das dir helfen!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

Es ist möglich, einen "geisterhaften" IFrame zu erstellen, der so wirkt, als wäre er nicht da.

Siehe http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

Grundsätzlich verwenden Sie das in https://developer.mozilla.org/en-US/docs/DOM/window.postMessage beschriebene Ereignissystem parent.postMessage(..).

Dies funktioniert mit allen modernen Browsern!

Wenn der Inhalt nur eine sehr einfache HTML-Datei ist, besteht der einfachste Weg darin, den Iframe mit Javascript zu entfernen

html:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

javascript:

function removeIframe(obj)(
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

Kontext

Ich musste dies selbst im Kontext einer Web-Erweiterung tun. Diese Web-Erweiterung fügt ein Stück UI in jede Seite ein und diese UI lebt in einer iframe. Der Inhalt von iframe ist dynamisch, daher musste ich die Breite und Höhe von iframe selbst anpassen.

Ich benutze React , aber das Konzept gilt für jede Bibliothek.

Meine Lösung (dies setzt voraus, dass Sie sowohl die Seite als auch den iframe steuern)

Innerhalb der iframe habe ich body Stile geändert, um wirklich große Dimensionen zu haben. Auf diese Weise können die Elemente im Inneren den gesamten Platz einnehmen. width und height 100% zu machen, hat für mich nicht funktioniert (Ich glaube, der iframe hat einen Standardcode width = 300px und height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Dann habe ich die gesamte iframe-Benutzeroberfläche in ein div eingefügt und einige Stile angegeben

#ui-root {
  display: 'inline-block';     
}

Nachdem ich meine App in diesem #ui-root gerendert habe (in React mache ich das innerhalb von componentDidMount), berechne ich die Dimensionen dieses div-Objekts und synchronisiere sie mit window.postMessage zur übergeordneten Seite:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

Im übergeordneten Rahmen mache ich so etwas:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

So habe ich es beim Laden gemacht oder wenn sich die Dinge ändern.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

Für das ejjj-Direktionsattribut:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Beachten Sie den Prozentsatz. Ich habe ihn so eingefügt, dass Sie der Skalierung entgegenwirken können, die normalerweise für Iframe, Text, Anzeigen usw. durchgeführt wird. Geben Sie einfach 0 an, wenn keine Skalierung implementiert ist 

So würde ich es machen (getestet in FF/Chrome):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

Javascript muss im Header stehen:

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

Hier geht es iframe HTML-Code:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Css Stylesheet

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

Es gibt natürlich viele Szenarien, aber ich hatte dieselbe Domain für document und iframe und konnte dies bis zum Ende meines iframe-Inhalts anheften:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Dadurch wird der übergeordnete Container "gefunden" und die Länge auf einen Fudge-Faktor von 50 Pixel gesetzt, um die Bildlaufleiste zu entfernen.

Es gibt nichts, was die Änderung der Dokumentenhöhe "beobachten" könnte, was ich für meinen Anwendungsfall nicht benötigte. In meiner Antwort bringe ich ein Mittel zum Verweisen auf den übergeordneten Container mit, ohne IDs zu verwenden, die in den übergeordneten/iframe-Inhalt eingebettet sind.

Ich weiß, dass der Beitrag alt ist, aber ich glaube, dass dies ein weiterer Weg ist. Ich habe gerade in meinem Code implementiert. Funktioniert perfekt sowohl beim Laden von Seiten als auch beim Ändern der Seitengröße:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});