Sammlung einer Zusammenfassung der HTML-Iframe-Nutzung

Detaillierte Analyse der Iframe-Nutzung
<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe>
Mit <IFRAME> können Sie einen schwebenden Rahmen oder Container für Text oder Grafiken festlegen.
GRENZE
<IFRAME BORDER="3"></IFRAME>
Legt die Breite des Rahmens um den Rahmen fest
RAHMENBODEN
<IFRAME FRAMEBODER="0"></IFRAME>
Legt fest, ob der Rahmen dreidimensional ist (0=nein, 1=ja)
HÖHE, BREITE
<IFRAME HÖHE="31" BREITE="88"></IFRAME>
Legen Sie die Breite und Höhe des Rahmens fest
SCROLLEN
<IFRAME SCROLLING="NEIN"></IFRAME>
Gibt es eine Bildlaufleiste (JA, NEIN, AUTO)
SRC
<IFRAME SRC="MÄDCHEN.GIF"></IFRAME>
Geben Sie die per IFRAME aufgerufene Datei oder das Bild an (HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
„Bild-in-Bild“-Effekt – Apropos Verwendung von IFRAME-Tags. Wenn man sich die aktuellen Websites ansieht, ist die Internetgeschwindigkeit etwas langsam, aber fast jede Seite muss eine Reihe ähnlicher Dinge wie Banner, Spaltenbilder, Urheberrechte usw. einfügen. Natürlich ist es verständlich, dass ein einheitlicher Website-Stil und Werbeeffekt erforderlich ist, aber schließlich werden die Geldbörsen der Benutzer durch diese „Verschönerungen“ „zunehmend erschöpft“. Gibt es eine Möglichkeit, das erneute Herunterladen dieser ähnlichen Dinge nach dem einmaligen Herunterladen zu vermeiden und nur den Webseiteninhalt der Bereiche mit geändertem Inhalt herunterzuladen?
Die Antwort lautet eindeutig: Verwenden Sie das Iframe-Tag!
1. Verwendung des Iframe-Tags Wenn es um Iframe geht, haben Sie es vielleicht schon vor langer Zeit in die „vergessene Ecke“ geworfen, 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:

Code kopieren

Der Code lautet wie folgt:

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:

Code kopieren

Der Code lautet wie folgt:

2. Gegenseitige Steuerung zwischen übergeordnetem Formular und schwebendem Rahmen 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 sehr wichtig, die Beziehung zwischen den 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:

Code kopieren

Der Code lautet wie folgt:

<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:

Code kopieren

Der Code lautet wie folgt:

<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?
Beispiel

Code kopieren

Der Code lautet wie folgt:

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Nachdem ich iframe verwendet hatte, stellte ich fest, dass die Bildlaufleiste nicht schön war und ich stattdessen 2 Bilder verwenden wollte ↑↓
Wie soll dies erreicht werden?
Antwort:
Ersetzen Sie den folgenden Code auf der Webseite

Code kopieren

Der Code lautet wie folgt:

<Titel>..</Titel>
<SCRIPT LANGUAGE="javascript">
Funktion scrollen(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
wenn (temp==0) zurückgeben;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABELLE BREITE="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="Breite:100%; Höhe:100;Überlauf: versteckt;Rahmenstil:gestrichelt;Rahmenbreite: 1px,1px,1px,1px;">
Text Text

Text

Text

Text

</DIV>
</TD>
<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll (-3)" BORDER="0" ALT="Drücken Sie die Maus, um schneller zu gehen!"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="Drücken Sie die Maus, um sich schneller zu bewegen!"></TD>
</TR>
</TABLE>

Durch die Verwendung von Iframe kann eine externe Datei in einer Tabelle aufgerufen werden, was sehr nützlich ist. Diese Website verwendet auf vielen Seiten Iframe-Effekte.
Jetzt lernen wir, wie man das Iframe-Tag verwendet.
Das Format des Iframe-Tags ist:

Code kopieren

Der Code lautet wie folgt:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></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 Bereichs „innerer Rahmen“;
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. Damit der „innere Rahmen“ mit dem angrenzenden Inhalt verschmilzt, wird er oft auf 0 gesetzt.
Name: Der Name des Frameworks, der zur Identifizierung verwendet wird.
Zum Beispiel:
<Iframe src="http://s.jb51.net" width="250" height="200" scrolling="Auto" frameborder="0" name="main"></iframe>
Wenn Sie den übergeordneten Frame zur Steuerung des internen Frames verwenden möchten, können Sie zur Steuerung target="Frame-Name" verwenden.
IFrame kann auch Text bearbeiten. Haben Sie schon einmal daran gedacht, dass es neben Formularen (<form>) noch andere Webseitenelemente gibt, mit denen Text bearbeitet werden kann? Verwenden Sie einfach die versteckte Eigenschaft von IFrame, um es zu einem Texteditor zu machen.
<html>
<body onload="editor.document.designMode='Ein'">
<IFrame ID="editor"></IFrame>
</body>
</html>
Das Attribut designMode gibt den Status des Designmodus des IFrames an (an/aus). Worauf warten Sie noch? Probieren Sie es aus!
Bei geschickter Nutzung dieser Funktion können viele unerwartete Effekte erzielt werden. Wenn wir unten einen Bildeditor erstellen.
<html>
<body onload="imgEditer.document.designMode='Ein';imgEditer.document.write('<img src=Bild.gif>')">
<IFrame id="imgEdit"></IFrame>
</body>
</html>

Hier noch einige Ergänzungen:
<iframe> ist eine Form von Frame und wird ebenfalls häufig verwendet.
Beispiel 1.
<iframe Breite=420 Höhe=330 Rahmenrand=0 Scrollen=auto src=URL></iframe>
Es gibt keine weiteren Worte dazu.
Breite: die Breite der eingefügten Seite; Höhe: die Höhe der eingefügten Seite; Bildlauf: ob die Bildlaufleiste der Seite angezeigt werden soll (optionale Parameter sind „auto“, „yes“ und „no“. Wenn dieser Parameter weggelassen wird, ist die Standardeinstellung „auto“). Rahmenrand: die Rahmengröße.
Hinweis: Es wird empfohlen, einen absoluten Pfad für die URL zu verwenden: <iframe width=0 height=0 frameborder=0 scrolling=auto src=http://WWW.jb51.net></iframe>
Schwarz 88*8. . .
Beispiel 2.
Ob eine Seite einen Rahmen hat. . Klicken Sie auf einen beliebigen Link auf der Seite und öffnen Sie ihn in diesem <iframe>. Fügen Sie name=** im Iframe hinzu (**selbst festlegen)
<iframe name=** ></iframe>
Ändern Sie dann den Standardöffnungsmodus: Fügen Sie <a href=URL target=**> zum HEAD der Webseite hinzu oder setzen Sie den Zielrahmen einiger Links auf (**).
Beispiel 3.
Um eine Seite einzufügen. Bitten Sie darum, nur den Mittelteil zu nehmen. Will nichts anderes. ,. .
Code:
<iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="https://www.jb51.net/" frameborder=no scrolling=no width=776 height=2500></iframe>
Kontrollieren Sie die Tiefe der eingefügten Seite, die vom Rahmen abgedeckt wird. Randbreite = 0, Randhöhe = 0; Kontrollieren Sie die Tiefe des oberen Teils, der vom Rahmen abgedeckt wird. Vspace = -170
Scrollen: Gibt an, ob die Bildlaufleiste verwendet werden soll (automatisch, ja, nein). Frameborder: Die Rahmengröße des Rahmens, Breite=776, Höhe=2500: Die Größe dieses Rahmens.
1. Fügen Sie der Seite ein Iframe hinzu
<iframe Breite=420 Höhe=330 Rahmenrand=0 Scrollen=auto src=URL></iframe>,
scrolling gibt an, ob die Bildlaufleiste der Seite angezeigt werden soll. Die optionalen Parameter sind auto, yes und no. Wenn dieser Parameter weggelassen wird, ist auto der Standardwert.
2. Der Hyperlink verweist auf die eingebettete Webseite. Geben Sie dem Iframe einfach einen Namen. Die Methode ist <iframe name=**>. Ich habe sie beispielsweise aa genannt und diese HTML-Sprache geschrieben: <iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe>. Anschließend sollte die Hyperlink-Anweisung auf der Webseite folgendermaßen geschrieben werden: <a href=URL target=aa>
3. Wenn Sie frameborder auf 1 setzen, ist der Effekt wie bei einem Textfeld. Die Verwendung von transparentem IFRAME muss von IE5.5 oder höher unterstützt werden. Im <body>-Tag der Datei transparentBody.htm habe ich style="background-color=transparent" hinzugefügt. Durch die folgenden vier Möglichkeiten zum Schreiben von IFRAME sollten Sie meiner Meinung nach ein klares Verständnis davon haben, wie Sie den transparenten Hintergrundeffekt von iframe erzielen:
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="Hintergrundfarbe: grün"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="Hintergrundfarbe: grün"> </IFRAME>
Wichtiger Punkt 1: Verwenden Sie JavaScript, um die Quelle des Iframes anzugeben und den Iframe neu zu laden (siehe mein Projekt am Ende dieses Artikels).
Schwierigkeit 1: Festlegen der Hintergrundfarbe des Iframes
ein.htm
<Skript>
Funktion setBG(){
var strColor=document.bgColor;
frm.document.bgColor=strColor;
}
</Skript>
<body style='Hintergrundfarbe:rot' onload='setBG()'>
<iframe src='about:blank' name=frm></iframe>
Schwierigkeit 2:
In der Skriptsprache und Objekthierarchie wird das Fenster, das den Iframe enthält, als übergeordnetes Fenster und der schwebende Frame als untergeordnetes Fenster bezeichnet. Es ist wichtig, die Beziehung zwischen den beiden zu verstehen, denn um im übergeordneten Fenster auf das untergeordnete Fenster zuzugreifen oder umgekehrt, müssen Sie die Objekthierarchie verstehen, um über das Programm auf das Fenster 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"
Oder parent.document.getElementById("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.
3: Ein Unterelement von frame greift auf ein anderes Unterelement von frame zu. Beispielsweise sind zwei weitere HTML-Dateien in die Frame-Datei frame.html eingebettet.
<div styleClass="basewnd">

<div id="Suche" name="Test" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="welcome_tag_home">
<iframe src="DirectoryTree.html" frameBorder="0" scrolling="nein" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
Wenn Sie nun auf das innerHTML-Attribut eines <font></font>-Tags mit der ID „section“ in der Datei Search.html in der Datei DirectoryTree.html zugreifen möchten, können Sie Folgendes tun:
Warnung (übergeordnetes Dokument.Suche.Abschnitt.inneresHTML),
wobei „search“ die ID des „search“-Divs ist, oder:
Alarm (übergeordnetes Dokument.getElementById("Suche").Abschnitt.innerHTML),
Oder Sie können auch Folgendes tun:
alert(parent.document.frames["frameSublist"].name) (das ist der direkte Zugriff auf das Iframe)
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.
Bitte beachten Sie, dass Versionen vor Nestscape 6.0 keine Iframe-Tags unterstützen.
Beispiel:
1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<iframe src="Seite" width="Breite" height="Höhe" align="Ausrichtung kann links oder rechts, zentriert sein" scrolling="ob es eine Bildlaufleiste gibt, füllen Sie nein oder ja aus"></iframe>
<IFRAME Rahmenrand=0 Rahmenabstand=0 Höhe=25 Randhöhe=0 Randbreite=0 Scrollen=nein Name=main src="/bgm/bgm.html" Breite=300></IFRAME>
2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Nachdem ich iframe verwendet hatte, stellte ich fest, dass die Bildlaufleiste nicht schön war und ich stattdessen 2 Bilder verwenden wollte ↑↓
Wie soll dies erreicht werden?
Antwort:
Ersetzen Sie den <title>..</title> der Webseite durch den folgenden Code
<SCRIPT LANGUAGE="javascript">
Funktion scrollen(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
wenn (temp==0) zurückgeben;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABELLE BREITE="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="Breite:100%; Höhe:100;Überlauf: versteckt;Rahmenstil:gestrichelt;Rahmenbreite: 1px,1px,1px,1px;">
Text<BR> Text<BR>
Text
Text
Text
<BR>
<BR>
</DIV>
</TD>
<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll(-3)" BORDER="0" ALT="Drücken Sie die Maus, um schneller zu gehen!"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="Drücken Sie die Maus, um schneller zu gehen!"></TD>
</TR>
</TABLE>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Der folgende Code kann die adaptive Höhe des IFrame realisieren, d. h. er passt sich automatisch an die Länge der Seite an, um zu vermeiden, dass Bildlaufleisten gleichzeitig auf der Seite und im IFrame angezeigt werden.
Der Quellcode lautet wie folgt
<Skripttyp="text/javascript">
//**iframe passt sich automatisch der Seite an**//
// Geben Sie die Liste der Iframe-Namen ein, deren Höhe automatisch an die Seitenhöhe angepasst werden soll
// Verwenden Sie Kommas, um die IDs der einzelnen Iframes zu trennen. Beispiel: ["myframe1", "myframe2"]. Wenn nur ein Formular vorhanden ist, sind keine Kommas erforderlich.
//Definieren Sie die ID des Iframes
var iframeids=["test"]
//Wenn der Browser des Benutzers kein Iframe unterstützt, soll das Iframe dann ausgeblendet werden? „Ja“ bedeutet ausgeblendet, „Nein“ bedeutet nicht ausgeblendet
var iframehide="ja"
Funktion dyniframesize()
{
var dyniframe = neues Array()
für (i=0; i<iframeids.length; i++)
{
wenn (document.getElementById)
{
//Die Höhe des Iframes automatisch anpassen
dyniframe[dyniframe.length] = document.getElementById(iframeids);
wenn (dyniframe && !window.opera)
{
dyniframe.style.display="Block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //Wenn der Browser des Benutzers NetScape ist
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
sonst wenn (dyniframe.Document && dyniframe.Document.body.scrollHeight) //Wenn der Browser des Benutzers IE ist
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
// Behandeln Sie das Anzeigeproblem von Browsern, die Iframe nicht unterstützen, gemäß den festgelegten Parametern
wenn ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.alles? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="Block"
}
}
}
wenn (window.addEventListener)
window.addEventListener("laden", dyniframesize, false)
sonst wenn (window.attachEvent)
window.attachEvent("beim Laden", dyniframesize)
anders
window.onload=dyniframesize
</Skript>
Definition und Verwendung des HTML-Tags <iframe>
Das Iframe-Element erstellt einen Inline-Frame, der ein anderes Dokument enthält.
Unterschiede zwischen HTML und XHTML
KEINER
Optionale Attribute
DTD Gibt an, in welchen DTDs dieses Attribut zulässig ist. S = Streng, T = Übergang, F = Frameset.
Attribut Wert Beschreibung DTD
linksbündig
Rechts
Spitze
Mitte
unten
Gibt an, wie dieser Rahmen im Verhältnis zum umgebenden Text ausgerichtet werden soll. TF
Rahmenrand 1
0
Gibt an, ob der Rahmenrand angezeigt werden soll. TF
Höhe Pixel
%
Definiert die Höhe des Iframes. TF
longdesc-URL Eine URL mit der Langbeschreibung des Inhalts dieses Frames. TF
marginheight in Pixeln definiert die oberen und unteren Ränder des Iframes. TF
Die Randbreite in Pixeln definiert den linken und rechten Rand des Iframes. TF
Name Frame_Name: Gibt einen eindeutigen Namen für das Iframe an (zur Verwendung in Skripten). TF
Scrollen ja
NEIN
Auto
Definiert eine Bildlaufleiste. TF
src-URL Die URL des Dokuments, das im Iframe angezeigt werden soll. TF
Breite Pixel
%
Definiert die Breite des Iframes. TF
Nachfolgend sehen Sie einen Teil des Quellcodes, den ich bei der Entwicklung eines tatsächlichen Projekts mit Frame geschrieben habe. Er dient nur als Referenz:
Hauptdatei (Framework):
<html>
<Kopf>
<title>Ressourcenmanagementsystem des Bildungsamts</title>
<script src="resources/js/DirectoryTree/DirectoryTree.js"></script>
<script src="resources/js/date.js"></script>
<link rel="stylesheet" type="text/css" href="ressourcen/css/frame.css">
<link rel="stylesheet" type="text/css" href="resources/css/global.css">
<Skriptsprache="Javascript">
Funktion setBgColor()
{
var bg = Dokument.bgColor
bottom.document.bgColor=bg
}
</Skript>
</Kopf>
<body bgcolor="#f9edff" onload="setBgColor()">
<div styleClass="basewnd">

<div ausrichten="zentrieren" Klasse="Flagge">
<iframe src="resources/HTMLFolders/Logo.html" frameBorder="0" scrolling="nein" width="950px" height="115px" marginheight="0"></iframe>
</div>

<div align="center" class="Benutzer">
<iframe src="resources/HTMLFolders/UserLogin.html" frameBorder="0" scrolling="nein" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>

<div id="Suche" name="Test" align="center" class="top_list_home">
<iframe id="frameSearch" name="search" src="resources/HTMLFolders/Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="navigation">
<iframe src="resources/HTMLFolders/Navigation.html" frameBorder="0" scrolling="nein" width="950px" height="25px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="neuestes_Thema">
<iframe src="resources/HTMLFolders/Sublist.html" frameBorder="0" scrolling="nein" width="540px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="welcome_tag_home">
<iframe src="resources/HTMLFolders/DirectoryTree.html" frameBorder="0" scrolling="nein" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>
</div>

<div align="center" class="Rechte_Home">
<iframe id="unten" name="unten" src="resources/HTMLFolders/Bottom.html" frameBorder="0" scrolling="nein" width="950px" height="100px" marginheight="0" marginwidth="0" allowTransparency="true" style="background-color: red"></iframe>
</div>
</div>
</body>
</html>
Die referenzierte Datei UserLogin.html:
<link rel="stylesheet" type="text/css" href="../css/global.css">
<table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:1px;border-color:#eeeeee;">
<tr><td>
<table border="0" align="left" width="190" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" width="20" height="25" class="tdfnt12px" background="../images/title_bar2.png" >
</td>
<td align="left" valign="bottom" height="25" class="tdfnt12px" background="../images/title_bar2.png">
<font style="height:18px;font-family:宋体;font-size:14px;"> <b>Mitglieder-Login</b></font>
</td>
</tr>
</Tabelle>
</td></tr>
</Tabelle>
<div id="divLogin" style="Sichtbarkeit:sichtbar;Position:absolut;links:10px;oben:30px">
<table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:0px;border-color:#eeeeee;">
<tr>
<td align="left" valign="bottom" height="45"><font class="normal">Benutzername:</font>
<td valign="bottom"><input type="text" name="BenutzerbereichBenutzername" id="BenutzerbereichBenutzername" class="id" maxlength="16"/></td>
</tr>
<tr>
<td align="left" height="40"><font class="normal">Passwort:</font>
<td><input Typ="Passwort" Name="userAreaUserPwd" ID="userAreaUserPwd" Klasse="pwd" maxlength="16"/></td>
</tr>
<tr>
<td align="center" colspan="2" class="tdfnt12px">
<input type="submit" value="Anmelden" style="color:black;border-color:skyblue;border-style:solid;border-width:0px;vertical-align:middle;font-family:宋体;width:68px;height:24px;background:url(resources/images/ButtonBg02.png);"/>
</td>
</tr>
</Tabelle>
</div>
Nehmen wir nun an, dass die Datei „Latest Theme List“ einen Hyperlink enthält. Klicken Sie darauf und das Iframe mit der „Latest Theme List“ wird neu geladen. Zu diesem Zeitpunkt muss JavaScript verwendet werden, um es zu implementieren:
<a href="" onclick="redirect(); return false">www.baidu.com</a>
<Skriptsprache="Javascript">
Funktion Umleitung ()
{
parent.document.frames["frameSublist"].location.href="www.baidu.com"
}
</Skript>

<<: Teilen Sie einen auf Ace basierenden Markdown-Editor

>>: Ein praktisches Tutorial zum schnellen Einfügen von zig Millionen Datensätzen in MySQL

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung

Artikel

Detaillierte Beispiele zur Ajax-Verwendung in js und jQuery

Unternehmenswebsite und Kolumnenwörterbuch Chinesisch-Englisch-Vergleich Freunde, die zweisprachige Unternehmenswebsites auf Chinesisch und Englisch erstellen, benötigen

Name Charakter Name Charakter Information Nachric...

Sammlung einer Zusammenfassung der HTML-Iframe-Nutzung

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

Vue3 AST Parser-Quellcode-Analyse

Analyse von 2 Token-Gründen und Beispielcode in der Webprojektentwicklung

So erstellen Sie YUM in einer Centos7-Umgebung

Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung

Detaillierte Beispiele zur Ajax-Verwendung in js und jQuery

Vue verwendet die Methode in der Referenzbibliothek mit Quellcode

12 Arten der Komponentenkommunikation in Vue2

Die Tabelle fügt Zellen und das img-Bild zusammen, um das gesamte td-HTML auszufüllen

Tutorial zur Installation des AutoFs-Mount-Dienstes unter Linux

Artikel empfehlen

So stellen Sie ein Vue-Projekt unter Nginx bereit

Einführung in TypeScript-Schnittstellen

So verwenden Sie die Vue-Timeline-Komponente

UL-Listen-Tag-Design für Webseiten mit mehrspaltigem Layout

Zusammenfassung des Verständnisses des virtuellen DOM in Vue

Detaillierte Erläuterung des Linux-CRM-Bereitstellungscodes

Unternehmenswebsite und Kolumnenwörterbuch Chinesisch-Englisch-Vergleich Freunde, die zweisprachige Unternehmenswebsites auf Chinesisch und Englisch erstellen, benötigen

Detailliertes Installationstutorial für MySQL 5.7 unter CentOS 6 und 7

Erstellen Sie einen virtuellen Nginx-Host basierend auf Domänenname, Port und IP

Bereitstellung eines MySQL-Hochverfügbarkeitsclusters und Implementierung eines Failovers

Zusammenfassung der langsamen MySQL-Abfragevorgänge

So implementieren Sie Polygonbrechung in Echtzeit mit Threejs

Die 13 am häufigsten in Interviews gestellten Fragen zu Vue-Modifikatoren

Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems

Implementierung eines laufenden Springboot-Projekts mit Docker