Normalerweise legt man Breite und Höhe für Iframes fest. Wenn der Inhalt größer ist, müssen Scrollbalken ausreichen. Das folgende Skript versucht, dies zu beheben, indem es die Größe des Iframes dynamisch an den geladenen Inhalt anpasst.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
Wird einen Iframe wie diesen vergrößern
<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>
Immer noch problematisch…
- Die Quelle des Iframe-Inhalts muss sich auf derselben Domain befinden
- Wenn sich die Höhe des Inhalts im Iframe ändert, passt sich dies nicht an
- Ich habe den Google Analytics-Code aus dem obigen Demo entfernt, da er, wenn ich ihn hinzufügte, anscheinend interferiert und die Größe des Iframes nicht anpasst, obwohl scheinbar keine Fehler generiert werden.
Ausgezeichnet, das ist genau das, wonach ich gesucht habe :)
hat jemand einen Bug auf IE erlebt? …IE hat die Größe des Iframes nicht geändert, stattdessen hat es eine feste Höhe für den Iframe gerendert. Gibt es schon eine Lösung? Danke
Genau das, was ich brauchte! Großartige Lösung, Mann. Danke!
Es funktioniert nicht in IE 7 oder 8. Getestet in IETester
Hallo Chris, ich frage mich, ob Sie ein Skript kennen, das die Höhe des Iframes anpasst, wenn sich der Inhalt im Iframe ändert. Danke!
Ich bin wirklich neu hier. Wo im Seiten-Code soll ich Ihren Code einfügen?
MANN! Das ist, was ich brauchte, ich weiß nicht, warum ich nicht daran gedacht habe, absolute Lebensretter
- Prost
Hallo,
Der obige Code funktioniert in IE7 einwandfrei. Aber er funktioniert nicht in IE8. Könnten Sie mir bitte den Code dafür schicken?
ausgezeichnet!
Danke :D
Mit Erfolg in IE9 für Windows getestet.
Setzen Sie doctype transitional am Anfang des HTML-Codes.
Immer noch einige Anpassungen nötig, um die gewünschte Seitenbreite zu erreichen.
Hallo !!!
Ihr Code funktioniert nicht im Chrome-Explorer (Ihr Code = andere Codes).
Bitte senden Sie mir den korrekten Code.
danke.
Hallo allerseits. Gleiche Frage hier. Wo soll ich das obige Skript platzieren.
Vielen Dank
Danke für das Skript! Ich habe Stile für den Iframe für IE, FF & Chrome hinzugefügt.
Danke Muz
style=”height:100%;width:100%;min-height:800px;”
Danke für das Skript. Ich habe mich entschieden, es vorerst zu verwenden. Wenn es für verschiedene Browser fehlschlägt, werde ich versuchen, etwas anderes zu finden. In der Zwischenzeit habe ich auch das hier gefunden
http://www.iframehtml.com/iframe-scripts.html#resizeable-iframe
Ich dachte, ich würde es hier teilen. Es scheint einfach und schnell zu verwenden zu sein, die Demo-Seite funktioniert gut, aber diese Lösung stimmte nicht mit meinem Code überein.
Funktioniert nicht mit IE 6:)
Vielleicht kann ich eine minimale Höhe festlegen?
Ich habe das Problem mit der Cross-Domain-Problematik (zumindest für Subdomains) umgangen mit
document.domain = “yourdomain.com”
Entschuldigen Sie meine Unwissenheit, aber können Sie bitte erklären, wo Sie document.domain eingefügt haben?
Funktioniert wie ein Zauber. Danke.
Weiß jemand, wie man das macht, wenn man ein PDF in den Iframe einbettet? Ich generiere das PDF dynamisch mit einem serverseitigen Skript (ASP.NET MVC). Das Problem, das ich gefunden habe, ist, dass, wenn die .load-Funktion ausgeführt wird, das PDF noch nicht in den Iframe gerendert wurde, sodass die „aktuelle“ Höhe etwa 150 Pixel beträgt (standardmäßig vielleicht).
Irgendwelche Ideen?
(Großartiger Beitrag übrigens!)
Versuchen Sie, Ihren Code in der if-Anweisung zu bearbeiten und ersetzen Sie Ihren Code durch diesen Code, hoffentlich funktioniert es
if ($.browser.safari || $.browser.opera || $.browser.msie && $.browser.version==”6.0″) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
Die Höhe passt sich an sich ändernde Inhalte im Iframe an, im neuesten IE und Firefox!
Ich bin aus Brasilien und dieses Tutorial ist gut, gut, gut.
ausgezeichnet!
Danke :D
Ich dachte aus irgendeinem Grund, dass das nicht möglich sei. Ich erstelle gerade eine Website mit verschiedenen Tabellen, die von einer anderen Website geladen werden (Sport-Scores). Die Möglichkeit, den Iframe auf diese Weise zu vergrößern, wird ihn wie einen Teil der Hauptseite aussehen lassen. Großartig!
Das funktioniert auch unter IE und benötigt kein jQuery
Hallo, gibt es vielleicht ein Update zu diesem Artikel? Ich habe mehrere Versionen ausprobiert und bekomme immer noch Probleme mit Safari zum Beispiel. Gibt es wirklich eine Problemumgehung, die auf allen Browsern ab IE7+ funktioniert?
Beste Grüße
Hallo,
Danke für das nützliche Skript.
Es funktioniert gut für Dateien von derselben Domain.
Aber ich möchte eine Google-Tabelle in einem Iframe anzeigen.
Und das obige Skript funktioniert bei mir nicht.
Können Sie bitte eine Lösung vorschlagen.
In Firebug sehe ich die folgende Fehlermeldung
Fehler: Zugriff auf Eigenschaft „document“ verweigert
this.style.height = this.contentWindow.document.body.offsetHeight + ‘px’;
Hallo, ich versuche, einen Iframe-Blog mit diesem Code hinzuzufügen.
Ich brauche nur Ihre Hilfe, wie haben Sie diesen Fehler behoben?
Bitte antworten Sie.
Danke.
Sie können dasselbe tun, indem Sie das Skript innerhalb des Iframe-Bodys ausführen. Wenn der Body geladen ist, suchen Sie den Iframe in window.top und ändern Sie seine Stilhöhe.
Leider habe ich einen sehr ärgerlichen Fehler in IE9 gefunden (in IE10 behoben), wenn ich die Höhe ändere, beeinflusst dies irgendwie das Hauptfenster und rollt mein CSS-Media-Query so herunter, dass es der Regel entspricht, die für die BREITE des Iframes passt! Wenn die Iframe-Breite also 900px beträgt, wird die gesamte Seite unter der Media-Regel @media only screen and (max-width: 960px) gerendert.
:'( Wie verhindern wir, dass eine Iframe-Höhenänderung die CSS-Media-Abfragen des übergeordneten Elements erneut ausführt?
Hallo,
Haben Sie dieses Problem gelöst? Wir erleben dasselbe.
Problem #2 kann mit einem Hauch von JS nach der Funktion behoben werden! Hier ist ein Trick, den @grahamkennery mir gezeigt hat
setInterval(iResize, 1000);Im Grunde wird dadurch die Funktion aufgefordert, ihre Arbeit jede Sekunde zu überprüfen. Dies ist ideal, wenn sich die Größe der Iframe-Quelle ändert!
@ArleyM
Entweder weiß ich nicht, wo ich setInterval(iResize, 1000); einfügen soll
oder es funktioniert einfach nicht.
Hoffe, es funktioniert und ich irre mich einfach
Danke!
Hallo Rico,
Das funktioniert bei mir…
Beachten Sie auch, dass neuere Versionen von jQ die Zeile
if ($.browser.safari || $.browser.opera) {aufif ($.support.safari || $.support.opera) {aktualisieren müssen.Ich hoffe, das hilft, Danke!
Wow.. coole Sache! Vielen Dank
Aber was ist, wenn es auf einer anderen Domain liegt? Wie z. B. FB-Kommentare?
Hilf mir
Wie füge ich eine CSS-Klasse hinzu und steuere Elemente innerhalb des Iframes mit JavaScript…
Bitte Bitte Hilfe
Danke
Das hat perfekt funktioniert. Ich bin beeindruckt!
Danke, tolle Tipps
Ja, es funktioniert, danke
aber
1. Ich habe den Access-Denied-Fehler im Skript erhalten
2. Mein Iframe hat statischen Inhalt, es funktioniert gut.
3. Wenn ich eine ComboBox habe, kann ich den Inhalt basierend darauf laden. Das funktioniert nicht.
Ja, es funktioniert, vielen Dank.
Wenn ich dynamische Inhalte lade, habe ich Folgendes verwendet:
//Elternseite
function Resize() {
var iFra = $(‘iframe’);
for (var i = 0, j = iFra.length; i < j; i++) {
iFra[i].style.height = iFra[i].contentWindow.document.body.offsetHeight + ‘px’;
}
}
//Iframe-Seite.
parent.Resize();
Das ist cool, aber ich brauche den Code dafür, wenn wir auf einen Text klicken, **eine Seite mit Formularen usw.** erscheint.
Das ist meine Elterseite: Ich habe zwei Iframes mit unterschiedlichen Seiten mit dynamischem Inhalt.
Datenschutz
Sie können uns persönliche Informationen wie Ihren Namen und Ihre Adresse oder E-Mail-Adresse mitteilen, die möglicherweise benötigt werden, um beispielsweise mit Ihnen zu korrespondieren, unsere Whitepapers herunterzuladen oder Ihnen ein Abonnement anzubieten. Wenn Sie uns mitteilen, dass Sie diese Informationen nicht als Grundlage für weitere Kontaktaufnahme mit Ihnen verwenden möchten, werden wir Ihre Wünsche respektieren. Wir beabsichtigen, die Qualität und Integrität Ihrer personenbezogenen Daten zu schützen.
Cookies und andere Technologien
**
**
Anbuselvan
**
**
Iframe-Seite
Hier verwende ich Combo und GridView. Basierend auf dem Combo-Wert wird die GridView-Zeile gebunden.
(Dynamisch geladene Daten aus der Datenbank.)
Funktioniert nicht bei mir
Hallo.
Vielen Dank dafür, das könnte eine Lebensrettung sein.
Ich habe eine Sorge und ein Problem, bei dem ich fragen möchte, ob Sie eine Lösung kennen, bitte.
Die Sorge ist, ich habe 2 Iframes innerhalb eines DIVs. Der erste und oberste Iframe ist für eine Reihe von „Thumbnail“-Bildern von Fotografien, die ein Besucher auswählen kann.
Das ausgewählte lädt dann das Foto in voller Größe in den Iframe darunter.
Es funktioniert wunderbar, außer der Tatsache, dass die Fotos alle unterschiedliche Höhen haben, sodass die Standardseite unterschiedliche Größen haben muss, um Platz zu schaffen…… :-(
Ihr Skript funktioniert wunderbar, um die Seite an die Größe des Fotos anzupassen, außer dass es einen kleinen Teil sowohl des Thumbnails als auch des Hauptfoto-Frames am unteren Rand abschneidet…….
Haben Sie Gedanken dazu, die sehr geschätzt würden.
Unten ist der „Iframe“-Code mit Ihrer Korrektur.
Vielen Dank im Voraus.
Glen
PS: Ich weiß nicht, was/wo „dreifache Backticks sind“…….. Entschuldigung
Gibt es eine Möglichkeit, z. B. 25 Pixel zum Offset-Query hinzuzufügen? Ich habe eine Seite, auf der ich scrollen möchte, wenn sie vergrößert wird, aber wenn der Iframe in das Fenster passt, gibt es anscheinend 25 Pixel, die immer noch nicht berücksichtigt werden, sodass er für diese zusätzlichen 25 Pixel immer einen Scrollbalken hat.
Danke
Gibt es eine Möglichkeit, scrollTop in diesem Code anstelle von offsetHeight zu verwenden?
Ich kann es nicht zum Laufen bringen, der Iframe verschwindet einfach
Hallo. Die .browser-Eigenschaft wurde aus jQuery entfernt und die Browsererkennung wird nicht empfohlen. Was ist der eigentliche Eigenart, der die Problemumgehung für Safari und Opera erfordert? Wenn bekannt, kann dies wahrscheinlich funktionsbezogen erkannt werden. Danke.
Erstaunlich. Es postet, wonach ich suche. Danke sehr
Ich habe eine Million Skripte ausprobiert, um es unter IE zum Laufen zu bringen, und es hat nie funktioniert, das gleiche wie dieses, aber es funktioniert hier… manchmal http://fiddle.jshell.net/onigetoc/korxwt0e/
Und hier meine ersten Versuche, einen jQuery-Iframe-Fit-Resizer zu erstellen… aber wie üblich funktioniert er nicht unter IE.
https://github.com/onigetoc/jQuery-iframe-resizer/
Hallo,
Ich stoße auf ein Problem mit dem Skript, wenn ich eine Quelle im selben Dateipfad verwende.
zum Beispiel
Das Skript funktioniert nicht für einzelne Wörter, es funktioniert nur bis zu einer bestimmten Länge.
Bitte helfen Sie
Danke
Hallo,
Ich stoße auf ein Problem mit dem Skript, wenn ich eine Quelle im selben Dateipfad verwende.
http://codepen.io/varshagn/pen/NRQBbY
Das Skript funktioniert nicht für einzelne Wörter, es funktioniert nur bis zu einer bestimmten Länge.
Bitte helfen Sie
Danke
Hallo zusammen,
Wir haben 3 Rahmen, wenn ich den 1. Rahmen benutze, sollte die Größe 50 sein, der 2. und 3. sollte 25 sein, so soll es sich automatisch ändern, und wenn ich den 2. Rahmen benutze, sollte die Größe automatisch 50 und die anderen 2 jeweils 25 sein.
Wie kann ich das mit CSS machen, kann mir jemand helfen?
Ich bin ein absoluter Amateur, und selbst für mich ist es so einfach zu bedienen. Danke!
Meine Iframes sehen in allen Browsern perfekt aus, außer in Chrome.
Ich konnte keine Lösung finden, also dachte ich, vielleicht könnte die Trennung von Chrome und die Zuweisung einer festen Höhe, damit meine Iframes nicht so stark abgeschnitten werden, zumindest besser sein als nichts.
Aber ich kann es nicht zum Laufen bringen. (Die Iframe-Höhen erscheinen bei etwa 150px).
Was mache ich vielleicht falsch damit?
Es ist besser, `scrolling` zu vermeiden: Es ist ein veraltetes Attribut (siehe MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Deprecated_attributes)