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

Analyse des Hintergrundauthentifizierungsprozesses von Vue-Elementen

Vorwort: Kürzlich stieß ich in meinem Projekt auf...

So füllen Sie Elemente in Spalten im CSS-Rasterlayout

Angenommen, wir haben n Elemente und müssen diese...

Docker löscht private Bibliotheksbilder vollständig

Werfen wir zunächst einen Blick auf die allgemein...

Tutorial zu HTML-Tabellen-Tags (27): Zell-Hintergrundbild-Attribut BACKGROUND

Wir können ein Hintergrundbild für die Zelle fest...

jQuery implementiert einen prozentualen Fortschrittsbalken

In diesem Artikel wird der spezifische Code von j...

mysql5.7 Installations- und Konfigurationstutorial unter Centos7.3

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

Beispiele für die Erstellung und Verwendung von MySQL-Triggern

Inhaltsverzeichnis Was ist ein Auslöser Erstellen...

So verwenden Sie CURRENT_TIMESTAMP in MySQL

Inhaltsverzeichnis Verwendung von CURRENT_TIMESTA...

Implementierung von React Routing Guard (Routing-Interception)

React unterscheidet sich von Vue. Es implementier...

Detaillierte Erklärung zum Ersetzen in ein Beispiel in MySQL

Detaillierte Erklärung zum Ersetzen in ein Beispi...

Natives JS zum Erzielen eines Schiebeknopfeffekts

Der spezifische Code des mit Js erstellten Schieb...

Detaillierte Erklärung der Zeit- und Datumsverarbeitung von moment.js

Konvertierung des Zeitformats von Montag auf Sonn...