Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy

Einführung

1. <iframe>-Tag: Ein Iframe ist ein Inline-Frame, der einen internen Rahmen auf der Seite generiert.

2. <frameset>-Tag: Frameset definiert einen Frame-Satz, der mehrere Unterframes enthält, von denen jeder ein unabhängiges Dokument hat.

<iframe> Tag

Iframe ist ein Inlineframe, der einen internen Rahmen auf der Seite erzeugt.

Eigentum

frameborder{int}: ob der Rahmenrand angezeigt werden soll;

src{URL}: gibt die URI einer Ressource an (z. B. einer Webseite oder eines Bildes);

scrolling{boolean}: ob die Bildlaufleiste des Rahmens angezeigt werden soll;

width{int}: definiert die Breite des Iframes;

height{int}: definiert die Höhe des Iframes;

Beispiel

<Text>
<h3>HTML-Tag-Demonstration</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</body>

Vorsichtsmaßnahmen

Beim Hinzufügen von Inhalten in „<iframe>Ich bin Inhalt</iframe>“ wird der hinzugefügte Inhalt nicht auf der Anzeigeseite angezeigt. Verwenden wir also das src-Attribut, um eine Seite anzugeben.

Anwendungsszenario

1) Wenn auf der Versions-Upgrade-Seite zu viele Versionsprotokolle vorhanden sind, können die Upgrade-Informationen in einem Iframe platziert werden.

2) Rich-Text-Bearbeitungsfeld, wie z. B. der Bereich [Neuer Aufsatz] im Blog Garden.

<frameset> Tag

Frameset definiert ein Frameset, das mehrere Frames enthält, von denen jeder ein unabhängiges Dokument hat.

Format

<Rahmensatz>
  <frame src=a.htm />
  <frame src=b.htm />
  <keine Frames></keine Frames>
</frameset>

Unterpunkt Beschreibung

<framesrc=a.htm />: Subframe<noframes></noframes>: Inhalt, der angezeigt wird, wenn der Browser diesen Frame nicht unterstützt.

Eigentum

Frameset-Attribute:

Zeilen: Gibt an, dass der Unterrahmen in Zeilen angeordnet ist ( ). Nehmen wir als Beispiel zwei Unterrahmen: rows="30%,*" bedeutet, dass der erste Rahmen 30 % der Höhe der gesamten Seite einnimmt und der zweite den Rest; cols: bedeutet, dass die Unterrahmen in Spalten angeordnet sind ( ). Nehmen wir als Beispiel zwei Unterrahmen: cols="30%,*" bedeutet, dass der erste Rahmen 30 % der Länge der gesamten Seite einnimmt und der zweite den Rest; noresize="noresize" bedeutet, dass der Bereich des Unterrahmens nicht angepasst wird.

Rahmenattribut:

src: URI, die auf eine Ressource verweist (z. B. eine Seite, ein Bild usw.);

Name: Gibt den Namen des Frames an, um Vorgänge zwischen Frames zu erleichtern.

Beispiel

<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
    <title>Frameset-Demo</title>
</Kopf>
<frameset rows="30%,*" noresize="noresize">
    <frame src=DateGrid.htm name="frm1" />
    <frame src=Dialog.htm name="frm2"/>
    <keine Frames></keine Frames>
</frameset>
</html>

Vorsichtsmaßnahmen

Achten Sie beim Verwenden des Frameset-Tags darauf, die äußeren <body></body>-Tags zu entfernen.

Operationen zwischen Unterrahmen

Mit Bezug auf den Beispielcode ändert frm1 die Seite, auf die die Teilmenge von frm2 zeigt: window.parent.frames["frm2"].location.href = 'b.htm'

Anwendungsszenario

1) Verwaltung der Hintergrundseite, das Menü wird links angezeigt und die Detailseite wird im rechten Rahmen angezeigt.

2) Funktionsmenüseite, z. B. bbs.csdn.net

Schnelle Fakten

Wenn Sie die Frames auf einer Seite durchsuchen, klicken Sie mit der rechten Maustaste in die Frame-Seite, um zusätzliche Frame-Informationen anzuzeigen.

Nehmen wir Chrome als Beispiel:

<<: Lösen Sie das Problem, dass bei Verwendung von GDB in Docker keine Haltepunkte eingegeben werden können

>>: MySQL Flush-List und Flushing-Mechanismus für Dirty Pages

jQuery implementiert verschachtelte Tab-Funktion

Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy

jQuery implementiert verschachtelte Tab-Funktion

So verwenden Sie JSONP in Vue

Verarbeitungsideen zum Entschlüsseln von WeChat-Applet-Paketen auf dem PC in node.js

So verwenden Sie weniger im WeChat-Applet (optimale Methode)

Vue implementiert eine teilweise Aktualisierung der Seite (Router-View-Seitenaktualisierung)

Ein kurzer Vortrag über Responsive Design

Zusammenfassung des Wissens zu langsamen MySQL-Protokollen

Implementierungsideen und Schritte für die MySQL-Master-Slave-Konstruktion (mehrere Master und ein Slave)

Webdatenspeicherung: Cookie, UserData, SessionStorage, WebSqlDatabase

Aufrufen von Baidu Map zum Abrufen von Längen- und Breitengrad in Vue

Artikel empfehlen

Ubuntu 20.04: Beispiel zum Ändern der IP-Adresse

Grafisches Tutorial zur Installation von CentOS 7.3 auf VMWare

Zweistündiges Docker-Einführungstutorial

Wie versteht JS Daten-URLs?

Allgemeine Front-End-JavaScript-Methodenkapselung

Details zur Funktionsverschachtelung und zu Funktionsabschlüssen in js

Detaillierte Untersuchung, ob bei der MySQL-Fuzzy-Abfrage zwischen Groß- und Kleinschreibung unterschieden wird

Schritte zum Erstellen des Projekts vite+vue3+element-plus

Wir treiben IE6 alleine in den Untergang

Verwenden von React+Redux zum Implementieren der Zählerfunktion und aufgetretene Probleme

CSS-Anfänger-Tutorial: Hintergrundbild füllt den gesamten Bildschirm

So ändern Sie die Ali-Quelle in Ubuntu 20.04

So installieren Sie Windows Server 2008 R2 auf einem Dell R720-Server

Tutorial zur Verwendung von $attrs und $listeners in Vue

SMS-Bestätigungscode-Anmeldefunktion basierend auf Antd Pro (Prozessanalyse)