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

Ich brauche eine Lösung zum automatischen Anpassen des widthund heighteines iframe, um seinen Inhalt kaum anzupassen . Der Punkt ist, dass die Breite und Höhe geändert werden können, nachdem das iframegeladen wurde. Ich brauche wohl eine Ereignisaktion, um mit der Änderung der Dimensionen des im Iframe enthaltenen Körpers fertig zu werden.

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Browserübergreifendes jQuery-Plug-In .

Cross-Browser, domänenübergreifende Bibliothek , die verwendet wird mutationObserver, um die Größe von iFrame an den Inhalt postMessageanzupassen und zwischen iFrame und Hostseite zu kommunizieren. Funktioniert mit oder ohne jQuery.

Alle bisher angegebenen Lösungen berücksichtigen nur eine einmalige Größenänderung. 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 im iFrame ausführen (sobald der Inhalt geändert wurde, müssen Sie ein Ereignis auslösen, um anzuzeigen, dass sich der Inhalt geändert hat).

Ich blieb eine Weile dabei, da der Code im iFrame auf das DOM im iFrame beschränkt zu sein schien (und den iFrame nicht bearbeiten konnte) und der außerhalb des iFrame ausgeführte Code mit dem DOM außerhalb des iFrame hängen blieb (und nicht konnte). t ein Ereignis aus dem iFrame aufnehmen).

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

Code wie dieser macht also das, 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>

Einzeiler-Lösung für Einbettungen: Beginnt mit einer Mindestgröße und erhöht sich auf die Inhaltsgröße. Keine Notwendigkeit für Skript-Tags.

<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 Domain stammt, sollte dies hervorragend 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>

Fügen Sie dann 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 browserübergreifende 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;
}

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>

Ich verwende diesen Code, um die Höhe aller Iframes (mit der Klasse autoHeight) automatisch anzupassen, wenn sie auf einer Seite geladen werden. Getestet und 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();
});

Dies ist eine solide Proof-Lö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;

}

das HTML

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

Ich habe Garnaphs großartige Lösung oben leicht modifiziert. Es schien, als hätte seine Lösung die Iframe-Größe basierend auf der Größe unmittelbar vor dem Ereignis geändert. Für meine Situation (E-Mail-Übermittlung über einen Iframe) musste sich die Iframe-Höhe direkt nach der Übermittlung ändern. Zeigen Sie beispielsweise Validierungsfehler oder eine "Danke" -Nachricht nach der Übermittlung an.

Ich habe gerade die verschachtelte click () -Funktion entfernt und sie in mein iframe-HTML 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>

Hat für mich funktioniert, bin mir aber nicht sicher, ob es sich um eine browserübergreifende Funktionalität handelt.

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ößenänderung von Höhe und Breite derselben und domänenübergreifender iFrames, um sie an den enthaltenen Inhalt anzupassen. Es bietet eine Reihe von Funktionen, mit denen die häufigsten Probleme bei der Verwendung von iFrames behoben werden können. Dazu gehören:

• Größe und Breite des iFrame werden auf die Inhaltsgröße angepasst.
• Funktioniert mit mehreren und verschachtelten iFrames.
• Domänenauthentifizierung für domänenübergreifende iFrames.
• Bietet eine Reihe von Berechnungsmethoden für die Seitengröße zur Unterstützung komplexer CSS-Layouts.
• Erkennt Änderungen am DOM, die dazu führen können, dass die Größe der Seite mithilfe von MutationObserver geändert wird.
• Erkennt Ereignisse, bei denen die Größe der Seite geändert werden kann (Fenstergröße ändern, CSS-Animation und -Übergang, Orientierungsänderung und Mausereignisse).
• Vereinfachtes Messaging zwischen iFrame und Hostseite über postMessage.
• Behebt Seitenverknüpfungen in iFrame und unterstützt Verknüpfungen zwischen iFrame und übergeordneter Seite.
• Bietet benutzerdefinierte Größen- und Bildlaufmethoden.
• Macht die übergeordnete Position und die Größe des Ansichtsfensters für den iFrame verfügbar.
• Arbeitet mit ViewerJS zusammen, um PDF- und ODF-Dokumente zu unterstützen.
• Fallback-Unterstützung bis auf IE8.

Alle können mit den oben genannten Methoden nicht 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

Nach einigem Experimentieren fand ich eine andere Lösung. Ich habe ursprünglich versucht, den Code als "beste Antwort" auf diese Frage zu kennzeichnen, und es hat nicht funktioniert. Ich vermute, dass mein Iframe in meinem Programm zu diesem Zeitpunkt dynamisch generiert wurde. Hier ist der Code, den ich verwendet habe (er hat bei mir funktioniert):

Javascript im Iframe, der geladen wird:

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, 4 oder mehr Pixel zur Höhe hinzuzufügen, um Bildlaufleisten zu entfernen (ein seltsamer Fehler / Effekt von Iframes). Die Breite ist noch seltsamer, Sie können sicher 18px zur Breite des Körpers hinzufügen. Stellen Sie außerdem sicher, dass Sie das CSS für den Iframe-Body angewendet haben (siehe 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 in Firefox (in Windows XP) durchgeführt. Ich muss noch weitere Tests durchführen. Bitte sagen Sie mir, wie dies für Sie funktioniert.

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>

Hier sind verschiedene 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 VERSTECKT

<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 zum Überblenden: ausgeblendet: ausgeblendet, um die Bildlaufleisten auszublenden, und der iFrame wird auf eine Breite und Höhe von bis zu 150% eingestellt, wodurch die Bildlaufleisten außerhalb der Seite gezwungen werden und der Körper dies nicht tut. Wenn Sie keine Bildlaufleisten haben, dürfen Sie nicht erwarten, dass der Iframe die Grenzen der Seite überschreitet. Dadurch werden die Bildlaufleisten des iFrame in voller Breite ausgeblendet!

Quelle: Stellen Sie die automatische Höhe des Iframes ein

Für den Fall, dass jemand hierher kommt: 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 Arbeit erledigt:

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

Ich fand, dass dieser Resizer besser funktioniert:

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 wurde.

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

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>

Kontext

Ich musste dies selbst im Rahmen einer Web-Erweiterung tun. Diese Web-Erweiterung fügt jeder Seite einen Teil der Benutzeroberfläche hinzu, und diese Benutzeroberfläche befindet sich in einer iframe. Der Inhalt im iframeist dynamisch, daher musste ich die Breite und Höhe des iframeselbst neu einstellen .

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 des habe iframeich bodyStile geändert , um wirklich große Dimensionen zu haben. Auf diese Weise können die Elemente im Inneren mit dem erforderlichen Platz angeordnet werden. Making widthund height100% haben bei mir nicht funktioniert (ich denke, weil der Iframe einen Standard hat width = 300pxund height = 150px)

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

Dann habe ich die gesamte Iframe-Benutzeroberfläche in ein Div eingefügt und ihm einige Stile gegeben

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

Nachdem ich meine App darin gerendert habe #ui-root(in React mache ich das drinnen componentDidMount), berechne ich die Dimensionen dieses Divs wie folgt und synchronisiere sie mit der übergeordneten Seite mit window.postMessage:

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

Im übergeordneten Frame 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)

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

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

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

Dies funktioniert in allen modernen Browsern!

Ich weiß, dass der Beitrag alt ist, aber ich glaube, dass dies ein weiterer Weg ist, dies zu tun. Ich habe gerade meinen 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();
});

Javascript, das in den Header eingefügt werden soll:

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

Hier geht 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;
    }

Für das Angularjs-Direktivenattribut:

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 eingefügt, damit Sie der Skalierung entgegenwirken können, die normalerweise für Iframe, Text, Anzeigen usw. durchgeführt wird. Geben Sie einfach 0 ein, wenn keine Skalierung implementiert ist

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

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

Natürlich gibt es viele Szenarien, aber ich hatte dieselbe Domain für Dokument und Iframe und konnte dies bis zum Ende meines Iframe-Inhalts angehen:

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 anschließend die Länge auf einen Fudge-Faktor von 50 Pixel festgelegt, um die Bildlaufleiste zu entfernen.

Es gibt dort nichts, um die Änderung der Dokumenthöhe zu beobachten. Dies brauchte ich für meinen Anwendungsfall nicht. In meiner Antwort bringe ich ein Mittel zum Verweisen auf den übergeordneten Container mit, ohne IDs zu verwenden, die in den übergeordneten / iframe-Inhalt eingebrannt sind.

Wenn Sie mit einem festen Seitenverhältnis leben können und einen reaktionsfähigen Iframe wünschen, ist dieser Code für Sie hilfreich. Es sind nur CSS-Regeln.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Der Iframe muss ein div als Container haben.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

Der Quellcode basiert auf dieser Site und Ben Marshall hat eine gute Erklärung.

Einfachheit:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

Wenn der Inhalt nur ein sehr einfaches HTML ist, ist der einfachste Weg, den Iframe mit Javascript zu entfernen

HTML Quelltext:

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

Javascript-Code:

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;
}

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>