iFrame-Mehrschichtverschachtelung, unbegrenzte Verschachtelung, hochadaptive Lösung

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:

<Text>
<iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="Seite B"
onload="diese.Höhe=Haupt-Dokumentkörper-Scrollhöhe;diese.Breite=Haupt-Dokumentkörper-Scrollbreite;wenn(diese.Höhe < 410){diese.Höhe=410;}">
</iframe>
</body>

Seite B

Code kopieren
Der Code lautet wie folgt:

<Text>
<!--Links-->
<div Stil="flost:links;">
Linkes Menü
</div>
<!--Rechts-->
<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();">
<!--Nach dem Testen muss der Body dieser untersten Unterseite ein Div mit Höhe haben, sonst wird die obige Anpassung wirksam-->
<div Stil="Höhe: 1px;">
</div>
<div style="padding-bottom: 10px;"> <!--Auch dieser Satz ist wichtig-->
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

Artikel empfehlen

So verwenden Sie einen Gamecontroller in CocosCreator

Inhaltsverzeichnis 1. Szenenlayout 2. Fügen Sie e...

Nginx tp3.2.3 404 Problemlösung

Vor Kurzem habe ich Apache auf nginx umgestellt. ...

Eine kurze Diskussion zur Verwendung von React.FC und React.Component

Inhaltsverzeichnis 1. Reagieren.FC<> 2. Kla...

Ein QQ-Chatroom basierend auf vue.js

Inhaltsverzeichnis Einführung Nachfolgend sehen S...

So machen Sie React-Komponenten im Vollbildmodus

einführen Dieser Artikel basiert auf React + antd...

CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann

Popup-Fenster werden in der tatsächlichen Entwick...

Mysql setzt Boolesche Typoperationen

Mysql legt den Booleschen Typ fest 1. Tinyint-Typ...

Eine kurze Analyse von Unterabfragen und erweiterten Anwendungen in der MySql-Datenbank

Unterabfrage in der MySql-Datenbank: Unterabfrage...

Detaillierte Erklärung zur Verwendung von Vue zum Laden von Wetterkomponenten

In diesem Artikel erfahren Sie, wie Sie mit Vue W...

So legen Sie eine horizontale Navigationsstruktur in HTML fest

In diesem Artikel werden Ihnen zwei Methoden zum ...

MySQL 5.7.18 Green Edition Download- und Installations-Tutorial

Dieser Artikel beschreibt den detaillierten Vorga...

Beispielcode zur Implementierung eines 3D-Bucheffekts mit CSS

Schauen wir uns zunächst ohne Umschweife die Rend...

Lösung für „Spezialisierter Schlüssel war zu lang“ in MySQL

Inhaltsverzeichnis Lösung 1 Lösung 2 Beim Erstell...

Problem beim Wechseln der Registerkarten für die Handschrift von React

Übergeordnete Datei importiere React, { useState ...

Ausführliche Erklärung der Modi und Umgebungsvariablen in Vue CLI

Vorwort Bei der Entwicklung tatsächlicher Projekt...