iFrame-Mehrschichtverschachtelung, unbegrenzte Verschachtelung, hochadaptive Lösung

Es gibt drei Seiten A, B und C. Seite A enthält Seite B und Seite B enthält Seite C. Seite A passt sich Seite B an und Seite C passt sich Seite B an.
A-Seite

Code kopieren

Der Code lautet wie folgt:

Seite B

Code kopieren

Der Code lautet wie folgt:

<Text>

<div Stil="flost:links;">
Linkes Menü
</div>

<div style="flost:right;">
<iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px;" scrolling="no" src="Seite C"></iframe>
</div>
</body>

Seite C schreibt die folgende JS-Funktion auf die unterste Seite (also die Seite ganz unten) und ruft die Methode im Onload-Ereignis des Textkörpers auf [die folgende Formel ist eine universelle Formel]

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
//Iframe automatisch erweitern, sodass sich alle übergeordneten Iframes automatisch an die Höhe der enthaltenen Seite anpassen
Funktion autoHeight(){
var doc = Dokument,
p = Fenster;
während(p = p.parent){
var Rahmen = p.Rahmen,
rahmen,
ich = 0;
während(Rahmen = Rahmen[i++]){
wenn (Rahmen.Dokument == doc) {
frame.frameElement.style.height = doc.body.scrollHeight + 'px'; // Bitte beachten Sie, dass Firefox 'px' hinzufügen muss, sonst ist es in Firefox ungültig
doc = S.Dokument;
brechen;
}
}
wenn(p == oben){
brechen;
}
}
}
</Skript>
<body onload="autoHeight();">

<div Stil="Höhe: 1px;">
</div>
<div style="padding-bottom: 10px;"> 
Hier können Sie den eigentlichen Inhalt schreiben und einen Wert für die Polsterung unten des Div festlegen.
</div>
</body>

<<: Gutes Website-Copywriting und gute Benutzererfahrung

>>: MySQL REVOKE zum Löschen von Benutzerberechtigungen

Django2.* + Mysql5.7-Entwicklungsumgebung Integrations-Tutorial-Diagramm

iFrame-Mehrschichtverschachtelung, unbegrenzte Verschachtelung, hochadaptive Lösung

Django2.* + Mysql5.7-Entwicklungsumgebung Integrations-Tutorial-Diagramm

Häufige Fehler bei der Verwendung von React Hooks

Detaillierte Erläuterung der dynamischen Änderung des Elementknotenstils in Uniapp

HTML-Meta erklärt

MySQL-Hochverfügbarkeitslösung MMM (MySQL Multi-Master-Replikationsmanager)

So lösen Sie das Problem unzureichender Berechtigungen beim Benutzerwechsel im Docker-Container

MySQL-Methode zum rekursiven Suchen nach allen untergeordneten Knoten eines Menüknotens

Detailliertes Tutorial zur Installation von Ubuntu 19.10 auf Raspberry Pi 4

So installieren Sie vncserver in Ubuntu 20.04

Detaillierte Erklärung der NodeJS-Modularität

Artikel empfehlen

MySql 8.0.16-win64 Installations-Tutorial

Lösung für PHP, das nach Abschluss der Nginx-Installation nicht analysiert werden kann

Beispiele für den Import und Export von MySQL-Tabellendaten

So richten Sie geplante Aufgaben in Linux und Windows ein

Reines CSS, um einen automatischen Rotationseffekt des Karussellbanners zu erzielen

Eine vorläufige Studie zum Vue-Unit-Testing

Tutorial zur Installation und Verwendung der verteilten Ceph-Software unter Linux

Docker-Bereinigungsumgebungsvorgang

React-Internationalisierung react-i18next ausführliche Erklärung

Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse

Detaillierte Erklärung des MySQL-Datenbankindex

Softwaretests – MySQL (VI: Datenbankfunktionen)

Detaillierte Erklärung von MySQLs Seconds_Behind_Master

MySQL slow_log-Tabelle kann nicht in InnoDB-Engine geändert werden – detaillierte Erklärung

Beispiel für die Verwendung verschachtelter HTML-Seiten (Frameset-Verwendung)