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

300

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.

Steinherz
quelle
Angular iFrame Auto-Höhe: gitlab.com/reduardo7/angular-iframe-auto-height
Eduardo Cuomo
Die akzeptierte Antwort funktioniert nicht. Versuchen Sie stackoverflow.com/a/31513163/482382
Steven Shaw

Antworten:

268
<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>
Ahmy
quelle
8
@ StoneHeart: Ja, es ist Cross-Browser. Der Code ist aufgrund der contentWindow-Eigenschaft, die in der DOM-Spezifikation nicht definiert ist, nicht standardkonform. In der DOM-Spezifikation gibt es eine Eigenschaft namens contentDocument, die jedoch von Internet Explorer 6 (und 7?) Nicht unterstützt wird. Die contentWindow-Eigenschaft kann stattdessen verwendet werden und ist in allen gängigen Browsern (Gecko, Opera, Webkit, IE) implementiert.
Rafael
30
Was nützt if (document.getElementById)?
Verbündeter
55
Vergessen Sie auch nicht, dass es nicht domänenübergreifend ist. Grund dafür ist eine Art Fehler: Die Berechtigung zum Zugriff auf die Eigenschaft 'document' wurde verweigert, wenn sich die Domäne unterscheidet. Eine Lösung finden Sie hier
Pierre de LESPINAY
15
Die Bedingung ist nicht nur nutzlos, sondern verursacht in den seltenen Fällen, für die sie bestimmt ist, garantiert Probleme. Warum überprüfen Sie, ob eine Methode vorhanden ist, und verwenden dann die Methode außerhalb der Prüfung?
JS
6
Ich denke, Sie meinten DOMContentLoaded, da DOMContentReadyscheint keine Sache zu sein: developer.mozilla.org/en-US/…
Max Heiber
46

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.

FFish
quelle
3
Die iframe-resizer-Bibliothek ist die robusteste Lösung.
kwill
35

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>
Garnaph
quelle
Was wäre der vollständige Code dafür? Ich nehme an, das Skript geht in den Iframe-HTML?
Andrew Hundt
Dies ist der vollständige Code, der im HTML-Code des iFrame ausgeführt wird. Der Teil "window.parent.document" gibt an, dass der jQuery-Selektor das DOM des übergeordneten Dokuments verwenden soll und nicht das Dokument, in dem Sie sich befinden (das sich im iFrame befindet).
Garnaph
13
Dies funktioniert hervorragend, wenn das übergeordnete Dokument und das Dokument im Iframe beide aus derselben Domäne stammen . Wenn dies nicht der Fall ist (oder in Chrome, wenn es sich um beide lokalen Dateien handelt ), werden die Sicherheitsrichtlinien des Browsers "gleichen Ursprungs" aktiviert und verhindern, dass der Iframe-Inhalt das übergeordnete Dokument ändert.
user56reinstatemonica8
1
Wenn Sie versuchen, so etwas domänenübergreifend zum Laufen zu bringen , schauen Sie in window.postMessage (IE8 +) nach und beachten Sie, dass Sie benutzerdefinierte Skripts sowohl für das Hostdokument (übergeordnetes Dokument) als auch für das Quelldokument (innerhalb des Iframes) benötigen. Das jQuery Postmessage Plugin könnte helfen. Da Sie Skripte auf dem Host und der Quelle benötigen, ist es möglicherweise einfacher, den Host den Inhalt von AJAX mit JSON-P laden zu lassen.
user56reinstatemonica8
3
Wie wird das Ereignis automatisch ausgelöst, anstatt jQuery("#IDofControlFiringResizeEvent").click(function ()?
Ben
33

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>

Kerl
quelle
Code-Snippet ausführen funktioniert nicht mit Safari 9.1.1. Enthält möglicherweise ein SO-Problem?
Elensar
Es ist nicht domänenübergreifend. Möglicherweise muss der Server der gerahmten Seite einige Header hinzufügen?
Finesse
Alle Antworten, die hier erwähnt werden, scrollHeight/scrollWidthsollten etwas angepasst werden, um die Körperränder zu berücksichtigen. Browser wenden Standardränder ungleich Null für das Textelement von Dokumenten an (und dies gilt auch für Inhalte, die in Frames geladen werden). Die funktionierende Lösung, die ich gefunden habe, besteht darin, Folgendes hinzuzufügen : parseInt(window.getComputedStyle(this.contentDocument.body).margin.
Stan
24

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>
brenjt
quelle
Gibt es einfache Möglichkeiten, dies zu tun, wenn der Ursprung aus einer anderen Domäne stammt?
BruceJohnJennerLawso
15

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;
}
Timo
quelle
1
Das ist seltsam. Für mich berechnet es eine sehr seltsame Breite des Iframes. Die Inhaltsbreite beträgt 750 und wird mit 300 berechnet. Haben Sie Ideen, warum?
Rob
Ich habe mit diesem Code gespielt (Höhenoptionen hinzugefügt). Wenn ich die iFrame-Höhe auf 100% einstelle, wird sie auf etwa 200 Pixel beschränkt. Wenn ich die iFrame-Höhe auf 600px einstelle, bleibt es dabei. @ RobertJagoda hast du eine Lösung dafür bekommen?
iaindownie
9

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>
Adrian P.
quelle
es heißt: Uncaught TypeError: $ ist keine Funktion bei autoResize ((index): 200) bei HTMLIFrameElement.onload ((index): 204)
Michael Rogers
2
@Michael Rogers Es liegt ein Konflikt mit $ vor oder Sie vergessen, die Datei jQuery.js einzuschließen. Verwenden Sie eine generische Funktion stackoverflow.com/questions/6109847/… oder ersetzen Sie $ durch jQuery
Adrian P.
8

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();
});
petriq
quelle
2
Was ist diese Magie 35, die Sie hinzufügen? Für welchen Browser und welches Betriebssystem haben Sie es gemessen?
h2stein
Jetzt weiß ich wirklich nicht, warum ich 35 Pixel hinzugefügt habe. Aber ich kann Ihnen mit Sicherheit sagen, dass ich es auf FF, IE (7, 8, 9) und Chrome getestet habe und gut funktioniert habe.
Petriq
3
Ich denke, 35 ist nur die Dicke der Bildlaufleiste
Sadegh
Ich musste dies ein wenig optimieren, damit es funktioniert - setHeight (iframe); direkt (entfernte den $ (iframe) .load () Wrapper um ihn herum.
Shacker
Die magischen 35 Pixel, die hinzugefügt werden, sollen die Iframe-Polsterung berücksichtigen. Ich würde hinzufügen, dass der Iframe keine Auffüllung enthalten sollte. Der Inhalt des Iframes sollte sich darum kümmern.
Filipe Melo
5

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>
Mas
quelle
3

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.

udackds
quelle
3

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.
Sergey Ponomarev
quelle
2

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

Kevin
quelle
2

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.

www139
quelle
Vielen Dank, dass dies in mobilen Browsern nach dem, was ich getestet habe, hervorragend funktioniert. Dort hatte ich Probleme mit der Größenänderung von Iframes!
Mircea Sandu
Ich bin froh, dass es Ihnen gefällt :-) Ich habe festgestellt, dass iframe größtenteils weitaus effizienter ist und eine bessere Browserunterstützung bietet als Ajax.
www139
1
DANKE!!! Hauptsächlich, weil Sie der einzige sind, der angegeben hat, wo der Code abgelegt werden soll, ohne davon auszugehen, dass die Leute es wissen. Diese einfache Lösung funktionierte perfekt für mich (Firefox, Chrome, Edge), um dynamische Inhalte auf derselben Domain in meiner Wordpress-Site zu erstellen. Ich habe eine Formularauswahl, die dynamischen Inhalt unterschiedlicher Länge ausgibt. Der iFrame passt sich wunderbar an. Ich musste die .clientHeight + 5 + 'px' optimieren; und clientWidth + 18 + 'px'; mehr Pixel sein. Und ich bin nicht sicher, warum die Anzeige: Tabelle; im CSS wurde benötigt, also habe ich es für meine Zwecke auskommentiert. Danke noch einmal.
Heres2u
1

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>
Latheesan
quelle
Wenn Microsoft sich nicht darum kümmert, wen sollte das interessieren?
m3nda
1

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

T.Todua
quelle
Die Beispiele, die Sie angegeben haben, sollen den vollständigen Inhalt des Iframes erstellen und nicht die Größe des Iframes automatisch an alle internen Inhalte anpassen. Es beantwortet die Fragen nicht.
Nickornotto
1

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.

BabaRick
quelle
Funktioniert bei Chrome / Win10 bei mir nicht - Inhalte werden teilweise unten abgeschnitten.
Glenneroo
1

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>
Kike Gamboa
quelle
1

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)
bboydflo
quelle
Schöne Lösung! Vielen Dank!
Redelschaap
0

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();
});
Gabriel Ferraz
quelle
0

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;
    }
Alin Razvan
quelle
0

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

Tino Costa 'El Nino'
quelle
0

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

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

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.

Henrys Katze
quelle
0

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.

Negas
quelle
-1

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);
});
Séverin
quelle
-1

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;
}
Daniel Katz
quelle
1
Dies ändert die Gliederung des übergeordneten Dokuments. Wenn Sie ein anderes Dokument als Figur mit einer Bildbeschreibung haben möchten, bleibt die Dokumentkontur dadurch nicht so prägnant. Verschiedene Anwendungsfälle, aber ich wollte ein Code-Snippet aus Gründen der Gliederung in einen Iframe verschieben.
Henry's Cat
-2
<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>
Chong Lip Phang
quelle
Dies ist kein CSS, sondern JS.
Clifgriffin