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

So erstellen Sie schnell zig Millionen Testdaten in MySQL

Bemerkung: Die Datenmenge in diesem Artikel beträ...

Installieren des Ping-Tools in einem von Docker erstellten Container

Denn die von Docker abgerufenen Basisimages wie C...

Vue+Element UI realisiert die Kapselung von Dropdown-Menüs

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für die Nichterreichbarkeit des Tencent Cloud Server Tomcat-Ports

Ich habe vor Kurzem einen Server mit Tencent Clou...

Detaillierte Analyse der Rolle von HTML-Kommentar-Tags <!--...-->

Wenn wir den Quellcode vieler Websites überprüfen...

Detaillierte Einführung in die Linux-Hostnamenkonfiguration

Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...

So kapseln Sie die Rich-Text-Komponente von WangEditor in Angular

Die Rich-Text-Komponente ist eine sehr häufig ver...

Beispielcode zur Implementierung des Aushöhlungseffekts mit CSS

Wirkungsprinzip Verwenden Sie hauptsächlich CSS-F...

Einführung in die Funktionen und Verwendung von Wert- und Namensattributen in HTML

1. Der in der Schaltfläche verwendete Wert bezieht...

JavaScript-Closures erklärt

Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...

Detaillierte Erklärung der Zeichensätze und Validierungsregeln in MySQL

1Mehrere gängige Zeichensätze Zu den gängigsten Z...