Der Unterschied zwischen HTML-Frame, Iframe und Frameset

10.4.1 Der Unterschied zwischen Frameset und Frame. Lassen Sie uns zunächst den Unterschied zwischen Frameset und Frame erklären.

<Frameset></Frameset> wird zum Unterteilen von Frames verwendet und jeder Frame ist mit <Frame></Frame> gekennzeichnet. <Frame></Frame> muss innerhalb von <Frameset></Frameset> verwendet werden. Der Code lautet wie folgt:

</FRAMESET>

Im obigen Beispiel teilt <Frameset></Frameset> die Seite in zwei Teile, die Seite im linken Frame ist admin_left.htm und die Seite im rechten Frame ist admin_center.htm.

Hinweis: Die Frame-Reihenfolge des Tags <Frame></Frame> ist von links nach rechts oder von oben nach unten.

Die Unterschiede zwischen den beiden sind wie folgt:

● <Frameset> ist ein Frame-Tag, der angibt, dass das Webdokument aus Frames besteht, und das Layout der Frames festlegt, aus denen das Frameset im Dokument besteht.

● <Frame> wird verwendet, um die Eigenschaften jedes Frames im Frameset festzulegen.

10.4.2 Frameset-Parametereinstellungen
<Frameset> muss einige spezifische Parameter festlegen, die das Layout der gesamten Seite direkt bestimmen. Der Code lautet wie folgt:

<Frameset-Rahmen=1 Rahmenabstand=1 Rahmenfarbe=#47478d Zeilen=* Spalten=180,*>

Die Parametereinstellungen und ihre Bedeutung des obigen Codes sind in Tabelle 10.3 dargestellt.

Tabelle 10.3 Frameset-Parameter

Parameter	veranschaulichen
Grenze	Stellen Sie die Randstärke des Rahmens in Pixeln ein.
Rahmenrand	Legen Sie fest, ob der Rahmenrand angezeigt werden soll. 0 bedeutet keine Anzeige, 1 bedeutet Anzeige
Rahmenabstand	Gibt den Abstand zwischen den Frames an
Rahmenfarbe	Stellen Sie die Rahmenfarbe ein
Reihe	Teilen Sie das Dokument in obere und untere Rahmen auf. Der Wert nach „Zeile“ kann eine Zahl oder ein Prozentsatz sein. „“ bedeutet, den verbleibenden Platz zu belegen. Die Anzahl der Zahlen stellt die Anzahl der horizontal geteilten Rahmen dar. Beispielsweise bedeutet „Zeile = „210,,10 %“, dass die Seite in drei Rahmen geteilt ist: oben, Mitte und unten. Der obere Rahmen belegt 210 Pixel, der untere Rahmen 10 % des gesamten Dokuments und der verbleibende Platz wird vom mittleren Rahmen belegt. * ist ein relativer Begriff. Row=* bedeutet beispielsweise, dass auf der Seite kein Frame-Layout mit oberen und unteren Strukturen vorhanden ist.
Pässe	Dieselben Einstellungen wie bei „Zeile“

10.4.3 Rahmenparameter-Einstellungen

Bezüglich der Einstellung der Frame-Parameter lautet der Code wie folgt:

Wie in Tabelle 10.4 gezeigt.

Tabelle 10.4 Rahmenparameter

Parameter	veranschaulichen
Name	Legen Sie den Namen des Frameworks fest. Er muss auf Englisch sein.
Quelle	Legen Sie den Seitenpfad und den Namen fest, der im Rahmen angezeigt wird. Es kann ein relativer oder ein absoluter Pfad sein.
Randbreite	Gibt den Abstand vom linken und rechten Rand des Rahmens an
Randhöhe	Gibt den Abstand zwischen dem Rahmen und den oberen und unteren Kanten an
Scrollen	Legen Sie fest, ob die Bildlaufleiste im Rahmen angezeigt werden soll. „Ja“ bedeutet „Anzeige“, „Nein“ bedeutet „Nicht anzeigen“ und „Auto“ bedeutet, dass die Bildlaufleiste automatisch angezeigt wird, wenn der Inhalt der Rahmenseite die Größe des Rahmens überschreitet.
Rahmenrand	Legen Sie fest, ob der Rahmenrand angezeigt werden soll. 0 bedeutet keine Anzeige, 1 bedeutet Anzeige
Noresize	Legen Sie fest, ob der Benutzer die Größe des Rahmens ändern kann. Wenn diese Option nicht festgelegt ist, kann der Browser den Rahmen nach Belieben ziehen, um die Größe des Rahmens zu ändern
Rahmenabstand	Gibt den Abstand zwischen den Frames an
Rahmenfarbe	Stellen Sie die Rahmenfarbe ein

10.4.4 Unterschiede zwischen Frame und Iframe

Die von Frame und Iframe erreichbaren Funktionen sind grundsätzlich dieselben, allerdings bietet Iframe mehr Flexibilität als Frame.

Mit dem Iframe-Tag, auch Floating-Frame-Tag genannt, lässt sich ein HTML-Dokument zur Anzeige in ein HTML-Dokument einbetten. Der größte Unterschied zum Frame-Tag besteht darin, dass der in der Webseite eingebettete Inhalt von <Iframe></Iframe> ein integraler Bestandteil der gesamten Seite ist, während der in <Frame></Frame> enthaltene Inhalt ein unabhängiges Individuum ist und unabhängig angezeigt werden kann. Darüber hinaus kann durch die Anwendung von Iframe derselbe Inhalt auch mehrmals auf derselben Seite angezeigt werden, ohne dass der Code dieses Inhalts wiederholt werden muss.

Die in Abbildung 10.21 gezeigte Seite verwendet Iframe, um Paginierungslinks oben und unten auf der Seite zu erstellen. Die Codes sind dieselben. Sie müssen nur dieselbe Datei in die Webseite einbetten, ohne den Code zu wiederholen. Die tatsächliche Wirkung dieses Falls finden Sie im Fall /frame/iframe/see_infomore_iframe.htm auf der beiliegenden Buch-CD.

10.4.5 Iframe auf transparent setzen

Ein weiterer großer Vorteil von Iframe besteht darin, dass Sie den Rahmen transparent machen können, sodass der Hintergrund innerhalb des Rahmens dem Hintergrund der Hauptseite entspricht. Aufmerksame Leser werden dieses Problem im obigen Beispiel finden. Im Folgenden finden Sie eine detaillierte Erklärung, wie Sie den Iframe transparent machen. Die einzelnen Schritte sind wie folgt:

(1) Öffnen Sie das Beispiel auf der CD-ROM /frame/iframe/see_infomore_iframe1.htm.

(2) Wenn Sie die Auslagerungsdatei in einem Browser durchsuchen, werden Sie feststellen, dass der Hintergrund der Originalzelle in dem Bereich, in dem der Iframe eingefügt ist, verdeckt ist. Dies ist nicht der gewünschte Effekt.

(3) Öffnen Sie die Seite page.htm, wechseln Sie zur Codeansicht und fügen Sie den folgenden Code in das <body>-Tag ein:

Abbildung 10.21 Verwenden von Iframe zum Erstellen eines Seitenumbruchs

(4) Wechseln Sie in der Datei see_infomore_iframe1.htm zur Code-Ansicht und prüfen Sie den Code für die Zelle, die den Iframe in die Seite einfügt, wie folgt:

</td>

(5) Im <Iframe>-Tag

<Framename="links" src=" index_manager/admin_left.htm " Randbreite="1" Randhöhe="1" Scrollen="nein" Frameborder="1" noresize Framespacing="2" Bordercolor="#cc0000">

Die Parametereinstellungen und ihre Bedeutung des obigen Codes

allowTransparency="true"

(6) Der Zellcode zum Einfügen des Iframes lautet wie folgt:

(7) Speichern Sie die beiden Seiten page.htm und see_infomore_iframe1.htm und durchsuchen Sie die Ergebnisse in einem Browser.

<<: Zusammenfassung einiger gängiger Methoden des JavaScript-Arrays

>>: CSS Sticky Footer Mehrere Implementierungen

Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen

Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser

Vom Backend zum Frontend: was für eine Tragödie. A...

Der Unterschied zwischen HTML-Frame, Iframe und Frameset

10.4.3 Rahmenparameter-Einstellungen

10.4.4 Unterschiede zwischen Frame und Iframe

10.4.5 Iframe auf transparent setzen

Beschreiben Sie kurz, wie Sie das Tomcat-Image installieren und das Webprojekt in Docker bereitstellen

Über das durch die HTML-Kodierung verursachte verstümmelte Problem

JS realisiert den Effekt der Baidu News-Navigationsleiste

So löschen Sie Tabellendaten in MySQL

Erläuterung der Verwendungsszenarien von SQL und verschiedenen NoSQL-Datenbanken

Beispielanalyse der MySQL-Codeausführungsstruktur [Sequenz-, Verzweigungs-, Schleifenstruktur]

CSS-Namenskonventionen (Regeln), die es wert sind, gesammelt zu werden Häufig verwendete CSS-Namensregeln

Natives JS zur Implementierung eines Bildkarussells. JS zur Implementierung eines kleinen Werbe-Plugins.

Erstellen einer LEMP-Umgebung (Linux+Nginx+MySQL+PHP) unter CentOS 8.1 (Details zum Tutorial)

Wie der Linux-Kernel in den Prozessadressraum eindringt und den Prozessspeicher ändert

Artikel empfehlen

Detaillierte Erläuterung der Installation von Anwendungen in Linux Centos7 ohne Internetverbindung

Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden

Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil

Ubuntu 18.04 installiert pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib

Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser

Ein einfaches Beispiel für eine gemeinsame MySQL-Tabellenabfrage

Exquisiter Snake-Implementierungsprozess in JavaScript

Erfahren Sie in zehn Minuten, wie Sie Microservices mit Docker bereitstellen

Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung

JavaScript implementiert eine verschiebbare Modalbox

So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten

Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null

jQuery implementiert Akkordeon-Kleinbuchstaben

So erstellen Sie eine Tabelle in MySQL und fügen Feldkommentare hinzu

Drei Möglichkeiten zur Verwendung von CSS-Inlinestilen, eingebetteten Stilen und externen Referenzstilen