Webdesign-Kenntnisse: Problem der adaptiven Höhe von Iframes

Manche Leute sind vielleicht noch nicht auf dieses Problem gestoßen, deshalb möchte ich zunächst erklären, was adaptive Höhe ist. Die sogenannte adaptive Iframe-Höhe bedeutet, dass unter Berücksichtigung der Ästhetik und Interaktivität der Benutzeroberfläche der Rand und die Bildlaufleiste des Iframes ausgeblendet werden, sodass nicht zu erkennen ist, dass es sich um einen Iframe handelt. Wenn das Iframe immer eine Seite mit der gleichen festen Höhe aufruft, können wir die Iframe-Höhe einfach fest codieren. Wenn das Iframe die Seiten wechseln muss oder die eingebundene Seite dynamische DOM-Operationen ausführen muss, muss das Programm die Höhe des Iframes mit der tatsächlichen Höhe der eingebundenen Seite synchronisieren.
Übrigens sollten Iframes nur verwendet werden, wenn es unbedingt notwendig ist, da sie die Front-End-Entwicklung zu sehr aufwändig machen.
Es gibt zwei traditionelle Ansätze:
Methode 1: Nachdem jede eingefügte Seite ihren eigenen Inhalt geladen hat, führen Sie JS aus, um die Höhe dieser Seite zu ermitteln, und synchronisieren Sie dann die Iframe-Höhe der übergeordneten Seite.
Methode 2: Führen Sie JS im Onload-Ereignis des Iframes der Hauptseite aus, um den Höheninhalt der eingebundenen Seite abzurufen, und synchronisieren Sie anschließend die Höhe.
Aus Sicht der Codewartung ist Methode 2 besser als Methode 1, da bei Methode 1 jede eingebundene Seite hierfür den gleichen Code einführen muss und dadurch viele Kopien entstehen.
Beide Methoden behandeln nur statische Dinge, das heißt, sie werden nur ausgeführt, wenn der Inhalt geladen wird. Wenn JS verwendet wird, um die durch DOM verursachten Höhenänderungen zu manipulieren, ist dies nicht sehr praktisch.
Wenn wir im Hauptfenster ein Intervall erstellen, ständig die Höhe der eingeschlossenen Seite abrufen und es dann synchronisieren, wäre das nicht praktisch und würde das Problem des von JS betriebenen DOM lösen? Die Antwort ist ja.
Demoseite: Hauptseite iframe_a.html, enthaltene Seiten iframe_b.htm und iframe_c.html
Codebeispiel für die Hauptseite:

Code kopieren

Der Code lautet wie folgt:

＜iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"＞＜/iframe＞＜script type="text/javascript"＞
Funktion reinitIframe(){
var iframe = document.getElementById("frame_content");
versuchen{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}fangen (Beispiel){}
}
window.setInterval("reinitIframe()", 200);
＜ /Skript＞

Wird es bei der weiteren Umsetzung zu Effizienzproblemen kommen?
Ich habe einen Test durchgeführt und 5 Fenster (IE6, IE7, FF, Opera, Safari) gleichzeitig geöffnet, um diesen Code auszuführen. Es hatte keine Auswirkungen auf die CPU, selbst als ich sie auf 2 ms einstellte, gab es keine Auswirkungen (im Grunde bei 0 % Auslastung gehalten).
Lassen Sie uns als Nächstes über die Kompatibilitätsprobleme verschiedener Browser sprechen und darüber, wie die richtige Höhe ermittelt wird. Dabei vergleichen wir hauptsächlich body.scrollHeight und documentElement.scrollHeight. Beachten Sie, dass dieser Artikel diesen Dokumenttyp verwendet. Unterschiedliche Dokumenttypen sollten die Ergebnisse nicht beeinflussen. Wenn Ihre Seite jedoch keinen Dokumenttyp deklariert, sollten Sie zuerst einen hinzufügen.

Code kopieren

Der Code lautet wie folgt:

＜ !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<a href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>"＞ Fügen Sie den folgenden Testcode an die Hauptseite an, um diese beiden Werte auszugeben. Codebeispiel:
＜div＞＜button＞Höhe prüfen＜/button＞＜/div＞＜script type="text/javascript"＞
Funktion checkHeight() {
var iframe = document.getElementById("frame_content");
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
alarm("bHöhe:" + bHöhe + ", dHöhe:" + dHöhe);
}
＜ /script＞ Wenn die Seite geladen wird, können Sie eine absolut positionierte Ebene wechseln, um die Seitenhöhe dynamisch zu ändern. Wenn die Ebene erweitert wird, erhöht sich die Höhe der Seite. Codebeispiel:
＜div＞＜Schaltfläche＞Overlay umschalten＜/Schaltfläche＞
＜ /div＞
＜ div-Stil = "Höhe: 160px; Position: relativ" ＞
＜ div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"＞＜/div＞
＜ /div＞
＜ Skripttyp = "text/javascript"＞
Funktion toggleOverlay() {
var overlay = document.getElementById('overlay');
overlay.style.display = (overlay.style.display == „keine“) ? „Block“: „keine“;
}
＜ /Skript＞

Nachfolgend sind die Testwerte des obigen Codes in verschiedenen Browsern aufgeführt:

Code kopieren

Der Code lautet wie folgt:

(bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, rot = falscher Wert, grün = richtiger Wert)
/ Wenn die Ebene ausgeblendet ist Wenn die Ebene erweitert ist
bHöhe dHöhe bHöhe dHöhe
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Oper 181 181 300 300
Safari 184 184 303 184

Wenn wir für den Moment die Tatsache ignorieren, dass Opera 3 Pixel weniger hat als die anderen … können Sie sehen, dass, wenn nichts absolut positioniert ist, die beiden Werte gleich sind und es egal ist, welchen Sie nehmen.
Wenn dies jedoch der Fall ist, verhält sich jeder Browser anders und kein einzelner Wert ist korrekt. Wir können jedoch eine Regel finden: Die Wahl des Maximalwerts der beiden Werte stellt eine Kompatibilität mit allen Browsern sicher. Daher muss der Code unserer Hauptseite wie folgt umgewandelt werden:

Code kopieren

Der Code lautet wie folgt:

Funktion reinitIframe(){var iframe = document.getElementById("frame_content");
versuchen{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var Höhe = Math.max(bHöhe, dHöhe);
iframe.height = Höhe;
}fangen (Beispiel){}
}
window.setInterval("reinitIframe()", 200);

Auf diese Weise wird das Kompatibilitätsproblem grundsätzlich gelöst. Übrigens wirkt sich nicht nur die absolut positionierte Ebene auf den Wert aus, sondern auch Float führt zu einer Differenz zwischen den beiden Werten.
Wenn Sie die Demo ausprobieren, werden Sie feststellen, dass in anderen Browsern (mit Ausnahme des Internet Explorers) der erreichte Höhenwert beim Erweitern und anschließenden Ausblenden der Ebene immer noch die erweiterte Höhe von 303 beträgt und nicht der tatsächliche Wert von 184 beim Ausblenden. Dies bedeutet, dass die Ebene nach dem Erhöhen nicht wieder verkleinert werden kann. Dieses Phänomen tritt auch beim Wechseln zwischen verschiedenen eingebundenen Seiten auf. Beim Wechseln von einer hohen Seite zu einer niedrigen Seite ist die erhaltene Höhe immer noch der hohe Wert.
Zusammenfassend lässt sich sagen, dass die Höhe von der Fensterhöhe übernommen wird, wenn die Höhe des Iframes höher ist als die tatsächliche Dokumenthöhe, und dass die Höhe von der tatsächlichen Dokumenthöhe übernommen wird, wenn die Fensterhöhe niedriger ist als die tatsächliche Dokumenthöhe. Suchen Sie daher nach einer Möglichkeit, die Höhe auf einen niedrigeren Wert als das eigentliche Dokument einzustellen, bevor Sie die Höhe synchronisieren. Fügen Sie dem Iframe daher onload="this.height=100" hinzu, damit es beim Laden der Seite auf eine ausreichend niedrige Höhe schrumpft und dann auf die gleiche Höhe synchronisiert wird.
Dieser Wert wird in der Praxis ermittelt. Er sollte kurz genug, aber auch nicht zu kurz sein, da es sonst in Browsern wie FF zu deutlichem Flimmern kommt. Die Hauptseite kann den DOM-Vorgang nicht überwachen, daher kann die Höhe erst reduziert werden, nachdem der DOM-Vorgang abgeschlossen ist.
In einem meiner tatsächlichen Projekte habe ich Kosten und Nutzen abgewogen und dies nicht getan, da der Aufwand zu hoch war, diesen Code in jede DOM-Funktion einzufügen. Tatsächlich war es nicht so schlimm, wenn die Ebene schrumpfte, aber nicht schrumpfte. Dies wurde in der Demo nicht gemacht. Wenn ein Leser einen besseren Ansatz hat, lassen Sie es mich bitte wissen.
Dies ist der endgültige Code der Hauptseite:
[/Code]
＜iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"＞＜/iframe＞
＜ Skripttyp = "text/javascript"＞
Funktion reinitIframe(){
var iframe = document.getElementById("frame_content");
versuchen{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var Höhe = Math.max(bHöhe, dHöhe);
iframe.height = Höhe;
}fangen (Beispiel){}
}
window.setInterval("reinitIframe()", 200);
＜ /Skript＞
[/Code]

<<: Textarea-Tag in HTML

>>: Die drei neuen Indizes, die in MySQL 8 hinzugefügt wurden, sind versteckt, absteigend und Funktionen

Spezifische Verwendung von MySQL-Globalsperren und Sperren auf Tabellenebene

Webdesign-Kenntnisse: Problem der adaptiven Höhe von Iframes

Spezifische Verwendung von MySQL-Globalsperren und Sperren auf Tabellenebene

Prinzipien und Beispiele für Lambda-Ausdrücke

So rufen Sie das unterbrochene System in Linux auf

Erstellen Sie Schritt für Schritt ein Dateiverwaltungssystem mit nginx+FastDFS

Detaillierte Schritte zur Yum-Konfiguration des Nginx-Reverse-Proxys

Analyse der Unfallursachen durch Unicode-Signatur BOM

Semantisierung von HTML-Tags (einschließlich H5)

Zwei Möglichkeiten zum Löschen von Floats in HTML

Detaillierte Einführung in den HTML-Head-Tag

Detaillierte Erläuterung zur Verwendung von Nginx + Consul + Upsync zum Erreichen eines dynamischen Lastausgleichs

Artikel empfehlen

Lösung für zu große Mysql-Binlog-Protokolldateien

Einige allgemeine erweiterte SQL-Anweisungen in MySQL

MYSQL METADATA LOCK (MDL LOCK) MDL-Sperrproblemanalyse

Upgrade von MySQL 5.1 auf 5.5.36 in CentOS

Vue implementiert einen einfachen Laufschrifteffekt

MySQL-Datenbankoptimierung: Detaillierte Erläuterung der Sharding-Operationen für Tabellen und Datenbanken

Analyse der MySql-Indexnutzungsstrategie

MySQL verwendet Variablen, um verschiedene Sortierungen zu implementieren

Lösung für den Konflikt zwischen zwei Registerkartennavigation in HTML

Implementierung des CSS-Ladeeffekts Pac-Man

CSS3-Beispielcode zum Erreichen einer Elementbogenbewegung

SQL-Abfrage für Benutzer, die an mindestens sieben aufeinanderfolgenden Tagen Bestellungen aufgegeben haben

Analyse der MySQL-Absturzwiederherstellung basierend auf Redo Log und Undo Log

40 CSS/JS-Stil und funktionale technische Verarbeitung

Web-Kenntnisse: Lösung für die Koexistenz mehrerer IE-Versionen IETester