„Bild-in-Bild“-Effekt – Diskussion der Verwendung von IFRAME-Tags
Autor：Eve Cole
Aktualisierungszeit：2009-06-11 17:24:01
Auf der aktuellen Website ist die Internetgeschwindigkeit etwas langsam, aber auf fast jeder Seite gibt es viele ähnliche Dinge wie Banner, Spaltenbilder, Urheberrechte usw. Natürlich aufgrund der Notwendigkeit eines einheitlichen Website-Stils und Werbeeffekts Daran ist nichts auszusetzen. Aber schließlich wird der Geldbeutel der Benutzer durch diese „verschönerten“ Dinge immer mehr geraubt.“ Gibt es eine Möglichkeit, dass diese ähnlichen Dinge nicht mehr nach einem Download heruntergeladen, sondern nur noch heruntergeladen werden müssen? der Webinhalt in Bereichen, in denen sich der Inhalt geändert hat?
Die Antwort lautet definitiv: Iframe-Tag anwenden!
1. Die Verwendung von Iframe-Tags <BR> Wenn es um Iframe geht, haben Sie es vielleicht in die „vergessene Ecke“ geworfen, aber wenn es um seinen Bruder Frame geht, werden Sie nicht unbekannt sein. Frame-Tag ist ein Frame-Tag, den wir als Multi-Frame-Struktur bezeichnen, um mehrere HTML-Dateien in einem Browserfenster anzuzeigen. Jetzt stoßen wir auf eine sehr realistische Situation: Wenn es ein Tutorial gibt, ist es nacheinander in Abschnitte unterteilt. Am Ende jeder Seite gibt es Links zu „vorheriger Abschnitt“ und „nächster Abschnitt“, mit Ausnahme des Inhalts Jedes Tutorial ist anders. Außerdem ist der Inhalt anderer Teile der Seite derselbe. Zu diesem Zeitpunkt dachte ich plötzlich, ob es eine Möglichkeit gibt, andere Teile davon zu behalten Die Seite bleibt unverändert, erstellen Sie einfach das Tutorial. Es wird zu einer seitenweisen Inhaltsseite ohne andere Inhalte. Wenn Sie auf den Link „Seite nach oben“ und „Down“ klicken, wird nur der Inhalt des Tutorials geändert, und die anderen Teile bleiben unverändert Dies spart zum einen Zeit und zum anderen wird das Tutorial in Zukunft drei lange und zwei kurze Änderungen haben, was auch sehr praktisch ist und sich nicht auf die gesamte Armee auswirkt. Navigation und andere Dinge, die auf fast jeder Seite enthalten sind, werden nur einmal heruntergeladen und dann nicht mehr heruntergeladen.
Mit dem Iframe-Tag, auch Floating-Frame-Tag genannt, können Sie ein HTML-Dokument in eine HTML-Anzeige einbetten. Der größte Unterschied zum Frame-Tag besteht darin, dass die durch dieses Tag referenzierte HTML-Datei nicht unabhängig von anderen HTML-Dateien angezeigt wird, sondern direkt in eine HTML-Datei eingebettet und mit dem Inhalt der HTML-Datei zu einem Ganzen integriert werden kann Darüber hinaus können Sie den gleichen Inhalt auch mehrmals auf einer Seite anzeigen, ohne den Inhalt wiederholt schreiben zu müssen. Eine anschauliche Metapher ist „Bild-in-Bild“-Fernsehen.
Lassen Sie uns nun über die Verwendung von Iframe-Tags sprechen.
Das Verwendungsformat des Iframe-Tags ist:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src: Der Pfad der Datei, bei der es sich um eine HTML-Datei, Text, ASP usw. handeln kann;
Breite, Höhe: die Breite und Höhe des „Bild-in-Bild“-Bereichs;
Scrollen: Wenn die angegebene HTML-Datei von SRC nicht im angegebenen Bereich angezeigt wird, wird die Bildlaufleiste nicht angezeigt, wenn sie auf „Nein“ eingestellt ist. Wenn sie auf „Ja“ eingestellt ist, wird die Bildlaufleiste automatisch angezeigt. es wird angezeigt;
FrameBorder: Die Breite des Bereichsrandes, um das „Bild-in-Bild“ mit angrenzenden Inhalten zu verschmelzen, wird oft auf 0 gesetzt.
Zum Beispiel:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
2. Gegenseitige Kontrolle zwischen übergeordnetem Formular und schwebendem Rahmen <BR> In der Skriptsprache und Objekthierarchie wird das Fenster, das den Iframe enthält, als übergeordnetes Formular bezeichnet, während der schwebende Rahmen als untergeordnetes Formular bezeichnet wird. Machen Sie deutlich, dass diese beiden diese Beziehung haben ist wichtig, da Sie für den Zugriff auf ein untergeordnetes Formular in einem übergeordneten Formular oder umgekehrt die Objekthierarchie kennen müssen, bevor Sie programmgesteuert auf das Formular zugreifen und es steuern können.
1. Greifen Sie auf die Objekte im Unterformular im übergeordneten Formular zu und steuern Sie sie. Im übergeordneten Formular ist der Iframe, also das Unterformular, ein untergeordnetes Objekt des Dokumentobjekts. Sie können direkt auf die Objekte im Unterformular zugreifen das Drehbuch.
Nun stellt sich die Frage: Wie steuern wir diesen Iframe? Hier müssen wir über das Iframe-Objekt sprechen. Wenn wir das ID-Attribut auf dieses Tag setzen, können wir über das Document Object Model DOM eine Reihe von Steuerelementen für den im Iframe enthaltenen HTML-Code 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 Dateicode test.htm lautet:
<html>
<Körper>
<h1 id="myH1">Hallo, mein Junge</h1>
</body>
</html>
Wenn wir den Text im H1-Tag mit der ID-Nummer myH1 in „Hallo, meine Liebe“ ändern möchten, können wir Folgendes verwenden:
document.myH1.innerText="Hallo, mein Lieber" (Dokument kann weggelassen werden)
In der Datei example.htm stimmt das Unterformular, auf das das Iframe-Markierungsobjekt verweist, mit dem allgemeinen DHTML-Objektmodell überein, und die Objektzugriffskontrollmethode ist dieselbe, sodass ich nicht auf Details eingehen werde.
2. Auf Objekte im übergeordneten Formular im Unterformular zugreifen und diese steuern <BR> Im Unterformular können wir über das übergeordnete (übergeordnete) Objekt auf die Objekte im übergeordneten Fenster zugreifen.
Wie 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 Frame1.htm mit der ID-Nummer myH2 zugreifen und ihn in „Hallo, mein Freund“ ändern möchten, können wir so schreiben: parent.myH2.innerText="hello,mein Freund"
Hier stellt das übergeordnete Objekt das aktuelle Formular dar (das Formular, in dem sich example.htm befindet). Der Zugriff auf die Objekte im übergeordneten Formular im untergeordneten Formular erfolgt ausnahmslos über das übergeordnete Objekt.
Obwohl Iframe in eine andere HTML-Datei eingebettet ist, bleibt es relativ unabhängig und stellt ein „unabhängiges Königreich“ dar. Die Eigenschaften in einem einzelnen HTML gelten auch für schwebende Frames.
Stellen Sie sich vor, wir können den unveränderten Inhalt als Iframe ausdrücken. Auf diese Weise müssen wir nicht wiederholt denselben Inhalt schreiben. Dies ist ein bisschen wie ein Prozess oder eine Funktion in der Programmierung und wie viel mühsam Handarbeit wird eingespart! Darüber hinaus, und das ist entscheidend, werden Seitenänderungen einfacher, da Sie nicht jede Seite ändern müssen, um das Layout anzupassen, sondern nur das Layout eines übergeordneten Formulars ändern müssen.
Zu beachten ist, dass der Nestscape-Browser das Iframe-Tag nicht unterstützt, aber in der heutigen IE-Welt scheint dies keine große Sache zu sein, nicht nur für sich selbst (die Website). aber auch für Internetnutzer, um Internetgebühren zu sparen.
