Tutorial für Webseiten -Produktionsfähigkeiten: Iframe Adaptive Höhe

Autor：Eve Cole Aktualisierungszeit：2025-04-21 07:48:02

Artikeleinführung von Wulin.com (www.vevb.com): Jemand hat dieses Problem möglicherweise noch nicht gestoßen. Lassen Sie uns zunächst erklären, was adaptive Höhe ist. Die sogenannte adaptive Iframe-Höhe bedeutet, dass basierend auf der Schönheit der Schnittstelle und Interaktion die Grenze und die Scrollbar des Iframe versteckt sind, was es unmöglich macht, zu erkennen, dass es sich um einen Iframe handelt. Wenn der Iframe immer die gleiche Seite mit fester Höhe aufruft, müssen wir nur die Iframe -Höhe zu Tode schreiben. Und

Suchen Sie mit mehr als 5 -W -Ergebnissen nach iFrame -Anpassungshöhe über Google, um mit mehr als 2W -Ergebnissen nach IFrame Height Adaptive Height zu suchen.

Ich habe die Dutzenden von Artikeln in den vorherigen Artikeln durchgelesen und eine große Anzahl von Nachdrucken ausgegraben. Es gibt drei oder fünf Artikel, die original sind. In diesen Originalartikeln sprechen sie im Grunde nur darüber, wie sie sich an statische Dinge anpassen können, aber sie überlegen nicht, wie dynamische Synchronisation nach JS DOM betrieben wird. Darüber hinaus war die Forschung in Bezug auf die Kompatibilität ebenfalls unvollständig.

Ich hoffe, in diesen beiden Aspekten ein paar eingehende Forschungen durchzuführen.

Vielleicht ist noch jemand mit diesem Problem in Kontakt gekommen. Lassen Sie uns zunächst erklären, was adaptive Höhe ist. Die sogenannte adaptive Iframe-Höhe bedeutet, dass basierend auf der Schönheit der Schnittstelle und Interaktion die Grenze und die Scrollbar des Iframe versteckt sind, was es unmöglich macht, zu erkennen, dass es sich um einen Iframe handelt. Wenn der Iframe immer die gleiche Seite mit fester Höhe aufruft, müssen wir nur die Iframe -Höhe zu Tode schreiben. Wenn der Iframe die Seiten wechseln möchte oder die mitgelieferte Seite für die Ausführung von DOM -Dynamikvorgängen muss, muss das Programm die IFrame -Höhe und die tatsächliche Höhe der enthaltenen Seite synchronisieren.

Wenn Sie den Iframe verwenden müssen, verursacht dies übrigens der Front-End-Entwicklung zu viel Probleme.

Es gibt ungefähr zwei traditionelle Praktiken:

Methode 1: Nachdem jede eingeschlossene Seite geladen wurde, indem eigene Inhalte geladen werden, führen Sie JS aus, um die Höhe dieser Seite zu erhalten, und synchronisieren Sie dann die Iframe -Höhe der übergeordneten Seite.

Methode 2: Führen Sie JS im Onload -Ereignis der Hauptseite Iframe aus, erhalten Sie den Höheninhalt der enthaltenen Seite und synchronisieren Sie dann die Höhe.

Aus der Sicht der Code -Wartung ist Methode zwei besser als Methode eins, da die eins mit der Methode einbezogene Seite ein Stück desselben Codes einführen muss, und viele Kopien wurden erstellt.

Beide Methoden befassen sich nur mit ruhigen Dingen, dh sie werden nur ausgeführt, wenn der Inhalt geladen wird. Wenn JS die durch das DOM verursachten Höhenänderungen betreibt, ist dies nicht sehr bequem.

Wenn Sie ein Intervall im Hauptfenster durchführen, erhalten Sie ständig die Höhe der enthaltenen Seite und synchronisieren Sie sie dann bequem und lösen Sie das Problem des JS -Betriebs des DOM? Die Antwort lautet ja.

Demo -Seite: Hauptseite iframe_a.html, die Seiten iframe_b.htm und iframe_c.html enthält

Beispiel für Hauptseitencode:

Funktion reinitiframe () {

var iframe = document.getElementById (Fram_Content);

versuchen{

Iframe.Height = iframe.ContentWindow.Document.DocumentElement.scrollHeight;

} catch (ex) {}

}

window.setInterval (Reinitiframe (), 200);

< /script> Wird es ein Problem mit der Effizienz geben?

Ich habe den Test durchgeführt und 5 Fenster (IE6, IE7, FF, Opera, Safari) geöffnet, um diesen Code auszuführen, der keine Auswirkungen auf die CPU hat, und er wird sogar ohne Auswirkungen auf 2 ms angepasst (im Grunde genommen bei 0% Belegung).

Sprechen wir über die Kompatibilitätsprobleme jedes Browsers. Wie man die richtige Höhe erreicht. Es lohnt sich hauptsächlich, die beiden Körper zu vergleichen. Beachten Sie, dass dieser Artikel diesen docType verwendet. Verschiedene docTypes sollten sich nicht auf das Ergebnis auswirken. Wenn Ihre Seite jedoch nicht docType deklariert wird, fügen Sie zuerst eine hinzu.

<! DocType html public -// w3c // dtd html 4.01 // en> Anhängen des folgenden Testcodes an die Hauptseite, um diese beiden Werte auszugeben, Code -Beispiel:

<Div> <taste> HACHTHAFT </button> </div> <skript type = text/javaScript>

Funktion checkHeight () {

var iframe = document.getElementById (Fram_Content);

var bheight = iframe.contentWindow.document.body.ScrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

alarm (bHeight: + bHeight +, dHeight: + dHeight);

}

< /script> wird geladen und eine absolut positionierte Ebene kann umgeschaltet werden, um die Seitenhöhe dynamisch zu ändern. Wenn die Ebene erweitert wird, wird die Seitenhöhe unterstützt. Codebeispiel:

<Div> <taste> Umschütten -Overlay </button>

< /div>

< /div>

Funktion ToggleOverlay () {

var overlay = document.getElementById ('Overlay');

Overlay.Style.Display = (Overlay.Style.Display == 'None')? 'Block': 'keine';

}

< /script> Im Folgenden werden die Testwerte des obigen Code in jedem Browser aufgeführt:

(bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, rot = Fehlerwert, grün = korrekter Wert)

/ Schicht ist versteckt, wenn die Schicht erweitert wird

Bheight Dheight Bheight Dheight

Dh 6 184 184 184 303

IE7 184 184 184 303

Ff 184 184 184 303

Oper 181 181 300 300

Safari 184 184 303 184

Lassen Sie uns das Problem ignorieren, dass die Oper 3 Pixel weniger als andere beträgt. Es ist ersichtlich, dass die beiden Werte, wenn es keine absolute Positionierung gibt, gleich sind, und es spielt keine Rolle, welche Sie einnehmen.

Aber wenn es vorhanden ist, ist die Leistung jedes Browsers unterschiedlich und es ist falsch, einen Wert alleine zu nehmen. Es kann jedoch eine Regel gefunden werden, dh zwei maximale Werte einnehmen und mit jedem Browser kompatibel sein. Daher muss unser Hauptseitencode in diese verwandelt werden:

Funktion reinitiframe () {var iframe = document.getElementById (Fram_Content);

versuchen{

var bheight = iframe.contentWindow.document.body.ScrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = math.max (bHeight, dHeight);

Iframe.Height = Höhe;

} catch (ex) {}

}

window.setInterval (Reinitiframe (), 200); Auf diese Weise wird das Kompatibilitätsproblem im Grunde genommen gelöst. Übrigens beeinflusst die absolut positionierte Schicht nicht nur den Wert, sondern auch die Differenz zwischen den beiden Werten.

Wenn Sie die Demo demonstrieren, werden Sie feststellen, dass in anderen Browsern, außer IE, wenn die Schicht erweitert und dann versteckt ist, der erhaltene Höhenwert immer noch in der erweiterten Höhe von 303 aufrechterhalten wird, und nicht der wahre Wert, der nach dem wahren Wert versteckt ist. Dieses Phänomen kann auch beim Wechsel zwischen verschiedenen eingeschlossenen Seiten auftreten. Beim Umschalten von einer hohen Seite zu einer niedrigen Seite ist die erhaltene Höhe immer noch der gleiche hohe Wert.

Es kann zusammengefasst werden als: Wenn die Höhe der Iframe -Form höher ist als die tatsächliche Höhe des Dokuments, wird die Höhe als Höhe der Form der Form angenommen, und wenn die Höhe des Formulars niedriger ist als die tatsächliche Höhe des Dokuments, wird die tatsächliche Höhe des Dokuments als die tatsächliche Höhe des Dokuments angenommen. Daher ist es notwendig, einen Weg zu finden, um die Höhe auf einen niedrigeren Wert als das tatsächliche Dokument einzustellen, bevor sie synchronisiert wird. Fügen Sie daher Onload = this.height = 100 ″ zum IFrame hinzu, so dass die Seite beim Laden kurz genug ist, und synchronisieren Sie sie dann mit derselben Höhe.

Dieser Wert wird in tatsächlichen Anwendungen bestimmt und ist kurz genug, aber nicht zu kurz, da in Browsern wie FF offensichtlich ist. Wenn das DOM betrieben wird, kann die Hauptseite nicht überwacht werden, sodass die Höhe nach dem Betrieb des DOM reduziert werden kann.

In einem meiner tatsächlichen Projekte habe ich dieses Ding nicht in Bezug auf die Abwägung von Kosten und Vorteilen getan, da ich diesen Code in jede DOM -Funktion einfügen muss, was zu teuer ist, und in der Tat ist es nicht so tödlich, die Schicht zu schrumpfen oder nicht zu schrumpfen. Einschließlich in die Demo wurde dieses Ding nicht getan. Wenn der Leser einen besseren Weg hat, lassen Sie es mich bitte wissen.

Hier ist der Code für die endgültige Hauptseite:

Funktion reinitiframe () {

var iframe = document.getElementById (Fram_Content);

versuchen{

var bheight = iframe.contentWindow.document.body.ScrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = math.max (bHeight, dHeight);

Iframe.Height = Höhe;

} catch (ex) {}

}

window.setInterval (Reinitiframe (), 200);

< /script>