Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen

Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen

Ich weiß nicht, ob Sie das Frameset-Attribut in Ihrem Projekt verwendet haben. Ich habe das Frameset-Attribut letztes Jahr bei der Erstellung eines Online-Kundendienstsystems verwendet. Da das Kundendienstsystem ein festes Layout benötigt, mit einem Teil oben, einem Teil unten usw., habe ich damals Frameset und Frame verwendet. Nachdem ich mit diesen Attributen herumgespielt hatte, verstand ich den Unterschied zwischen Iframe und Frame. Denn vorher habe ich in meinen Projekten grundsätzlich keine Frames verwendet und wenn doch, dann Iframes.

Lassen Sie uns unten über die spezifischen Unterschiede sprechen! Die folgenden Punkte sind zusammengefasst.

1. Frames können nicht allein ohne FrameSet verwendet werden, Iframes jedoch schon.

2. Der Rahmen kann nicht im Körper platziert werden;

Folgendes kann normalerweise angezeigt werden:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!--<body>-->     
  2. < Rahmensatz   Zeilen = "50%,*" >     
  3.     < Rahmen     Name = "Rahmen1"     src = "test1.htm" />      
  4.     < Rahmen     Name = "Rahmen2"     src = "test2.htm" />      
  5. </frameset>     
  6. <!--<body>-->    

Folgendes kann im Normalfall nicht angezeigt werden:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Textkörper >     
  2. < Rahmensatz   Zeilen = "50%,*" >     
  3.     < Rahmen     Name = "Rahmen1"     src = "test1.htm" />      
  4.     < Rahmen     Name = "Rahmen2"     src = "test2.htm" />      
  5. </frameset>     
  6. < Textkörper >    

Im Gegenteil, wenn der Iframe unter dem FrameSet-Attribut platziert wird, muss er im Body platziert werden

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Textkörper >     
  2.    < Rahmensatz >      
  3.      < iframe     Name = "Rahmen1"     src = "test1.htm" />      
  4.      < iframe     Name = "Rahmen2"     src = "test2.htm" />      
  5.    </frameset>      
  6. </ Körper >    

3. „iframe“ ist ein HTML-Tag und kann überall in HTML verwendet werden, „frame“ hingegen nicht.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Textkörper >     
  2.     < iframe     Name = "Rahmen1"     src = "test1.htm" />      
  3.     < iframe     Name = "Rahmen2"     src = "test2.htm" />      
  4. </ Körper >   
  5.   
  6. < Tabelle >     
  7. < tr >     
  8. <td> < iframe   Ich würde = ""   src = "" > </ iframe > </ td > < td > </ td >     
  9. </tr>     
  10. </ Tabelle >    

Der Rahmen muss im FrameSet verschachtelt sein und kann nicht in Tags wie „Tabelle“ verwendet werden.

4. Die Höhe des Rahmens kann nur durch FrameSet gesteuert werden; der Iframe kann selbst gesteuert werden, nicht durch FrameSet

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!--<body>-->     
  2. < Rahmensatz   Zeilen = "50%,*" >     
  3.     < Rahmen     Name = "Rahmen1"     src = "test1.htm" />      
  4.     < Rahmen     Name = "Rahmen2"     src = "test2.htm" />      
  5. </frameset>     
  6. <!--</body>-->     
  7.   
  8. < Textkörper >     
  9. < Rahmensatz >     
  10.     < iframe   Höhe = "30%"    Name = "Rahmen1"     src = "test1.htm" />      
  11.     < iframe   Höhe = "100"    Name = "Rahmen2"     src = "test2.htm" />      
  12. </frameset>     
  13. </ Körper >    

5. Wenn mehr als zwei Iframes auf derselben Seite verwendet werden, können sie im Internet Explorer normal angezeigt werden, in Firefox jedoch nur der erste. Die Verwendung von mehr als zwei Frames kann sowohl im Internet Explorer als auch in Firefox normal funktionieren.

<<:  Zusammenfassung und Beispiele der Kommunikationsmethoden für Vue3-Komponenten

>>:  Tipps, um zu verhindern, dass andere meine Seite als meine Webseite speichern und kopieren

Artikel empfehlen

Docker erstellt Redis5.0 und mountet Daten

Inhaltsverzeichnis 1. Einfaches Einbinden persist...

SQL-Implementierung von LeetCode (184. Das höchste Gehalt der Abteilung)

[LeetCode] 184. Abteilung Höchstes Gehalt Die Mit...

Zusammenfassung der Lösung für den Webpack -v-Fehler von Vue

Xiaobai lernte Vue kennen, dann lernte er Webpack...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17

In diesem Artikel wird die Installations- und Kon...

Eine kurze Einführung in Linux-Umgebungsvariablendateien

Im Linux-System können Umgebungsvariablen entspre...

So löschen Sie Ordner, Dateien und Dekomprimierungsbefehle auf Linux-Servern

1. Ordner löschen Beispiel: rm -rf /usr/java Das ...

MySQL 8.0.12 Einfaches Installations-Tutorial

In diesem Artikel finden Sie das Installations-Tu...

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

Dieser Artikel verwendet die Lizenzvereinbarung „...

Bidirektionale verknüpfte Liste der JavaScript-Datenstruktur

Eine einfach verkettete Liste kann nur vom Anfang...

Vue implementiert rekursiv benutzerdefinierte Baumkomponenten

In diesem Artikel wird der spezifische Code der r...

So fügen Sie Spalten in einer MySQL-Datenbank hinzu, löschen und ändern sie

Dieser Artikel beschreibt anhand eines Beispiels,...

JavaScript zur Implementierung des Flugzeugkriegsspiels

In diesem Artikel erfahren Sie, wie Sie mit Canva...