Detaillierte Erläuterung der Rolle und Verwendungstechniken des Iframe-Tags in HTML

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 aus der Notwendigkeit eines einheitlichen Website-Stils und Werbewirkung. Daran ist nichts auszusetzen, aber schließlich werden die Geldbörsen der Nutzer durch diese „verschönerten“ Dinger zunehmend aufgebraucht.“ Gibt es eine Möglichkeit, dass diese ähnlichen Dinge nicht mehr nach einem Download heruntergeladen werden müssen, sondern nur Laden Sie die Bereiche herunter, in denen sich der Inhalt geändert hat. Was ist mit den Webinhalten?

Die Antwort lautet definitiv: Iframe-Tag anwenden!

　1. Die Verwendung von Iframe-Tags

Wenn es um Iframe geht, haben Sie es vielleicht schon getan der „vergessene“ Corner“, jedoch ist es kein Unbekannter, über seinen Bruder Frame zu sprechen. 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 befinden sich außerdem Links zu „vorheriger Abschnitt“ und „nächster Abschnitt“. Zu jedem Tutorial-Abschnitt ist der Inhalt anderer Teile der Seite derselbe. Es scheint zu langweilig, Seite für Seite dumme Seiten zu erstellen. Dann dachte ich plötzlich, ob es eine Möglichkeit gibt, andere Teile der Seite zu erstellen Seite unverändert, machen Sie das Tutorial einfach zu einer Seite mit seitenweisem Inhalt, ohne anderen Inhalt. Wenn Sie auf den Seiten-Up- und Down-Link klicken, wird nur der Inhaltsteil des Tutorials geändert, und die anderen Teile bleiben unverändert Auf diese Weise sparen Sie zum einen Zeit und zum anderen ist es bei zukünftigen Tutorials auch sehr praktisch, die drei langen und zwei kurzen Änderungen zu ändern, und es wird sich nicht auf die gesamte Armee auswirken Banner, Spaltenliste, 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 zur Anzeige in einen HTML-Code 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 entweder um eine HTML-Datei handeln kann oder ein Text, ASP usw.;

Breite, Höhe: die Breite und Höhe des „Bild-in-Bild“-Bereichs

Scrollen: Wenn der von SRC angegebene HTML-Code nicht im angegebenen Bereich angezeigt wird, wird die Scrollleiste nicht angezeigt, wenn sie auf „Auto“ eingestellt ist es ist Ja, es wird angezeigt;

FrameBorder: Die Breite des Bereichsrandes wird häufig festgelegt, um das „Bild-in-Bild“ mit angrenzenden Inhalten zu verschmelzen auf 0.

Zum Beispiel:

<Iframe src="http://www.webjx.com" width="250" height="200" scrolling="no" frameborder="0"></iframe>

2. Gegenseitige Kontrolle zwischen übergeordnetem Formular und schwebendem Rahmen

In der Skriptsprache und Objekthierarchie wird das Fenster, das den Iframe enthält, als übergeordnetes Formular und der schwebende Rahmen als untergeordnetes Fenster bezeichnet. Stellen Sie sicher, 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 Objekte im untergeordneten Formular im übergeordneten Formular zu und steuern Sie sie.

Im übergeordneten Formular Im Iframe , das Unterformular ist ein Unterobjekt des Dokumentobjekts und auf die Objekte im Unterformular kann direkt im Skript zugegriffen werden.

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>

test Der .htm-Dateicode lautet:

<html>
　　　<body>
　　　　<h1 id="myH1">hello,my boy</h1>
　　　</body>
　　</html>

Wenn wir den Text im H1-Tag mit ändern möchten die ID-Nummer myH1. Für „Hallo, mein Lieber“ können Sie Folgendes verwenden:

document.myH1.innerText="hello, my Dear" (wobei „document“ weggelassen werden kann)

In der Datei example.htm stimmt das Unterformular, auf das das Iframe-Tag-Objekt verweist, mit dem allgemeinen DHTML-Objektmodell überein und die Objektzugriffskontrollmethode ist dieselbe, daher werde ich nicht auf Details eingehen .

2. Greifen Sie auf Objekte im übergeordneten Formular im Unterformular zu und steuern Sie sie.

Im Unterformular können wir auf die zugreifen Objekte im übergeordneten Fenster über das übergeordnete (übergeordnete) Objekt.

Beispiel.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">hello,my wife</h1>
　　　</body>
　　</html>

　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：parent.myH2.innerText="hello,my friend"

　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

　　有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Rolle und Verwendungstechniken des Iframe-Tags in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!