Analyse der Unterschiede zwischen Iframe und FRAME
|
1. Verwendung des Iframe-Tags <br />Wenn es um Iframe geht, haben Sie es vielleicht in die „vergessene Ecke“ geschoben, aber Sie kennen sicher seinen Bruder Frame. Das Frame-Tag ist ein Frame-Tag. Was wir als Multiframe-Struktur bezeichnen, ist die Anzeige mehrerer HTML-Dateien in einem Browserfenster. Jetzt stoßen wir auf eine sehr realistische Situation: Beispielsweise gibt es ein Tutorial, das Abschnitt für Abschnitt präsentiert wird, mit einem „Vorheriger Abschnitt“- und „Nächster Abschnitt“-Link am Ende jeder Seite. Abgesehen von den unterschiedlichen Inhalten der einzelnen Tutorials ist der restliche Seiteninhalt gleich. Wenn wir eine dumme Seite nach der anderen erstellen würden, wäre das zu langweilig. In diesem Moment kam mir plötzlich eine Idee. Wenn es eine Möglichkeit gäbe, den Rest der Seite unverändert zu lassen und das Tutorial nur in eine Inhaltsseite ohne anderen Inhalt umzuwandeln, würde sich beim Klicken auf die Links nach oben und unten nur der Inhaltsteil des Tutorials ändern und der Rest würde unverändert bleiben. Auf diese Weise wird einerseits Zeit gespart, und andererseits ist es sehr praktisch, wenn in Zukunft Änderungen am Tutorial vorgenommen werden, ohne das gesamte Team zu beeinträchtigen. Noch wichtiger ist, dass diese Werbebanner, Spaltenlisten, Navigation und andere Dinge, die sich auf fast jeder Seite befinden, nur einmal heruntergeladen und dann nicht erneut heruntergeladen werden müssen. Mit dem Iframe-Tag, auch Floating-Frame-Tag genannt, können Sie ein HTML-Dokument zur Anzeige in ein HTML-Dokument einbetten. Der größte Unterschied zum Frame-Tag besteht darin, dass die von diesem Tag referenzierte HTML-Datei nicht unabhängig von anderen HTML-Dateien angezeigt wird, sondern direkt in eine HTML-Datei eingebettet und mit dem Inhalt dieser HTML-Datei zu einem Ganzen integriert werden kann. Darüber hinaus kann derselbe Inhalt mehrmals auf einer Seite angezeigt werden, ohne dass der Inhalt wiederholt werden muss. Eine anschauliche Metapher ist ein „Bild-im-Bild“-Fernseher. Lassen Sie uns nun über die Verwendung von Iframe-Tags sprechen. Das Format des Iframe-Tags ist: <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> src: Der Pfad der Datei, die eine HTML-Datei, ein Text, ASP usw. sein kann. Breite, Höhe: die Breite und Höhe des „Bild-im-Bild“-Bereichs; Scrollen: Wenn die von SRC angegebene HTML-Datei im angegebenen Bereich nicht vollständig angezeigt werden kann, wird bei der Scroll-Option, wenn sie auf NEIN gesetzt ist, keine Bildlaufleiste angezeigt; wenn sie auf Automatisch gesetzt ist, wird die Bildlaufleiste automatisch angezeigt; wenn sie auf Ja gesetzt ist, wird sie angezeigt; FrameBorder: Die Breite der Bereichsgrenze. Um ein Verschmelzen des „Bild-im-Bild“ mit dem angrenzenden Inhalt zu ermöglichen, wird der Wert häufig auf 0 gesetzt. Zum Beispiel: <Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe> 2. Gegenseitige Steuerung zwischen übergeordnetem Formular und schwebendem Rahmen <br />In der Skriptsprache und der Objekthierarchie wird das Fenster, das den Iframe enthält, als übergeordnetes Formular und der schwebende Rahmen als untergeordnetes Formular bezeichnet. Es ist wichtig, die Beziehung zwischen beiden zu verstehen, denn um im übergeordneten Formular auf das untergeordnete Formular zuzugreifen oder umgekehrt, müssen Sie die Objekthierarchie verstehen, um über das Programm auf das Formular zugreifen und es steuern zu können. 1. Zugriff und Steuerung von Objekten im untergeordneten Formular im übergeordneten Formular. Im übergeordneten Formular ist der Iframe, also das untergeordnete Formular, ein untergeordnetes Objekt des Dokumentobjekts. Auf Objekte im untergeordneten Formular kann direkt im Skript zugegriffen werden. Nun stellt sich die Frage, wie wir diesen Iframe steuern. Hier müssen wir über das Iframe-Objekt sprechen. Wenn wir das ID-Attribut für dieses Tag festlegen, können wir über das Document Object Model DOM eine Reihe von Steuerelementen für das im Iframe enthaltene HTML ausführen. Betten Sie beispielsweise die Datei test.htm in example.htm ein und steuern Sie einige Tag-Objekte in test.htm: <Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe> Der Code der Datei test.htm lautet: <html> <Text> <h1 id="myH1">hallo, mein Junge</h1> </body> </html> Wenn wir den Text im H1-Tag mit der ID-Nummer myH1 in „Hallo, mein Lieber“ ändern möchten, können wir Folgendes verwenden: document.myH1.innerText="hallo, mein Lieber" (wobei „document“ weggelassen werden kann) In der Datei example.htm stimmt das Unterfenster, auf das das Iframe-Tag-Objekt zeigt, mit dem allgemeinen DHTML-Objektmodell überein, und die Methode zur Objektzugriffssteuerung ist dieselbe, sodass sie nicht wiederholt wird. 2. Greifen Sie im untergeordneten Fenster auf Objekte im übergeordneten Fenster zu und steuern Sie diese. Im untergeordneten Fenster können wir über das übergeordnete Objekt auf Objekte im übergeordneten Fenster zugreifen. Wie zum Beispiel example.htm: <html> <body onclick="alert(tt.myH1.innerHTML)"> <Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe> <h1 id="myH2">hallo, meine Frau</h1> </body> </html> Wenn wir auf den Titeltext in der ID-Nummer myH2 in frame1.htm zugreifen und ihn in „Hallo, mein Freund“ ändern möchten, können wir ihn folgendermaßen schreiben: parent.myH2.innerText="hallo, mein Freund" Hier stellt das übergeordnete Objekt das aktuelle Fenster dar (das Fenster, in dem sich example.htm befindet). Um im untergeordneten Fenster auf Objekte im übergeordneten Fenster zuzugreifen, müssen Sie ausnahmslos das übergeordnete Objekt verwenden. Obwohl Iframe in eine andere HTML-Datei eingebettet ist, bleibt es relativ unabhängig und ist ein „unabhängiges Königreich“. Die Funktionen in einer einzelnen HTML-Datei gelten auch für schwebende Frames. Stellen Sie sich vor, wir können durch das Iframe-Tag den unveränderten Inhalt mit Iframe darstellen, sodass derselbe Inhalt nicht neu geschrieben werden muss. Dies ähnelt ein wenig einem Prozess oder einer Funktion beim Programmieren und spart viel mühsame Handarbeit! Darüber hinaus werden dadurch – und das ist entscheidend – Seitenänderungen einfacher, weil Sie zum Anpassen des Layouts nicht jede Seite einzeln ändern müssen, sondern nur das Layout des übergeordneten Formulars. Zu beachten ist, dass der Nestscape-Browser das Iframe-Tag nicht unterstützt, aber in der heutigen, vom Internet Explorer dominierten Welt scheint das keine große Sache zu sein. Die weit verbreitete Verwendung des Iframe-Tags kommt nicht nur Ihnen (der Website) zugute, sondern spart auch Internetgebühren für Internetnutzer. Warum es nicht tun? Floating FRAME ist eine Definition in der HTML4.0-Spezifikation und wird von allen aktuellen Browsern unterstützt. Im Gegensatz zu der durch FRAMESET dargestellten Partition existiert ein schwebender FRAME auf der Webseite als integriertes Objekt und sein Stil ähnelt dem einer Grafik oder eines Applets auf einer Seite. Floating FRAME verwendet das Tag <IFRAME>, das über die meisten der gleichen Attributeinstellungen wie <FRAME> verfügt, darunter: Name, src, marginwidth, marginheight, FRAMEborder und scrolling. Gleichzeitig verfügt es über dieselben Höhen-, Breiten- und Ausrichtungsattribute wie Grafiken oder Applets. Darüber hinaus folgt der schwebende FRAME demselben Zielprinzip wie der normale FRAME: Wir können mit seinem Namen darauf zeigen. Dieses Prinzip gilt für schwebende Rahmen in jeder Art von Rahmen und umgekehrt. Der Link ohne Ziel im schwebenden FRAME zeigt auf sich selbst, während der _parent-Link auf den FRAME oder das Fenster zeigt, in dem sich das Dokument befindet, das den <IFRAME> enthält. Zum Beispiel: <IFRAME name="floater" src="start.htm" Breite=150 Höhe=200 hspace=10 Ausrichtung=links> <IMG src="Images/noFRAME.gif" alt="Sie können den schwebenden RAHMEN nicht sehen" Breite=150 Höhe=200 Abstand=10 Ausrichtung=rechts> </IFRAME><BR> <A href="one.htm" target="floater">One.htm anzeigen</A><P> <A href="two.htm" target="floater">Two.htm anzeigen</A><P> <A href="start.htm" target="floater">Start.htm wiederherstellen</A> Beachten Sie, dass bei Browsern, die das Tag <IFRAME> unterstützen, jeglicher Inhalt zwischen <IFRAME> und </IFRAME> ignoriert wird. Andernfalls wird der Inhalt angezeigt, der als Hinweis darauf dienen kann, dass der aktuelle Browser <IFRAME> nicht unterstützt. |
<<: Vergleich von 5 CSS-Scrolling-Ceiling-Implementierungsmethoden (Performance-Upgrade-Version)
>>: MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen
Artikel empfehlen
Zusammenfassung einiger effizienter magischer Operatoren in JS
JavaScript veröffentlicht mittlerweile jedes Jahr...
Tipps zum Schreiben prägnanter React-Komponenten
Inhaltsverzeichnis Vermeiden Sie die Verwendung d...
Vue implementiert den Beispielcode zum Verknüpfen der seitlichen Navigationsleiste mit der Registerkartenseite
Inhaltsverzeichnis Technologie-Stack Wirkung anal...
So entwickeln Sie Uniapp mit vscode
Da ich immer vscode zur Entwicklung von Front-End...
So konfigurieren Sie SSL für den Koa2-Dienst
I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...
【Webdesign】Teilen Sie E-WebTemplates exquisite Vorlagen für ausländische Webseiten (FLASH + PSD-Quelldatei + HTML).
Es handelt sich dabei ausschließlich um Webseiten...
Bootstrap3.0-Studiennotizentabelle bezogen auf
In diesem Artikel werden hauptsächlich Tabellen e...
Praktische Fähigkeiten zur Entwicklung von WeChat-Applets: Datenübertragung und -speicherung
Indem ich die verschiedenen Probleme, auf die ich...
Javascript Blob-Objekt zum Erzielen eines Dateidownloads
Inhaltsverzeichnis veranschaulichen 1. Blob-Objek...
Detaillierte Erklärung des unbekannten Fehlers 10061 bei der Verwendung von Navicat zur Verbindung mit einer Remote-Linux-MySQL-Datenbank
Bei der Verwendung von Navicat zum Herstellen ein...
Lösung für das Paging-Fehlerproblem bei MySQL-Eins-zu-viele-Assoziationsabfragen
Die Abfragedaten in der XML-Preisabfrage enthalte...
JavaScript zum Erreichen eines einfachen Tab-Leisten-Umschaltens
In diesem Artikel wird der spezifische Code für J...
JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab
Zusammenfassung: Wenn über die Leistungsoptimieru...
In einem Artikel erfahren Sie, wie Sie mehrere DIVs und Schaltflächenbindungs-Eingabeereignisse in VUE implementieren
Aktuell besteht die Anforderung, dass beim Klicke...