ZZzzz~ kann
<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
winden
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://www.xyz.com/xyz "; width="250" height="200" scrolling="no" frameborder="0"></iframe>
Zwischen Fenster und Floating Frame In der Skriptsprache und Objekthierarchie wird das Fenster, das den Iframe enthält, als übergeordnetes Formular und der schwebende Frame als untergeordnetes Formular bezeichnet. Es ist wichtig, die Beziehung zwischen den beiden zu klären, da der Iframe darin gesteuert werden muss Wenn Sie auf ein Unterformular zugreifen oder umgekehrt, müssen Sie die Objekthierarchie kennen, bevor Sie über ein Programm auf das Formular zugreifen und es steuern können.
1. Auf die Objekte im Unterformular im übergeordneten Formular zugreifen und diese steuern. Im übergeordneten Formular ist der Iframe, also das Unterformular, ein untergeordnetes Objekt des Dokumentobjekts. Sie können im Skript direkt auf die Objekte im Unterformular zugreifen .
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. Greifen Sie im untergeordneten Formular auf die Objekte im übergeordneten Formular zu und steuern Sie diese. Im untergeordneten Formular 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 mit der ID-Nummer myH2 auf den Titeltext in Frame1.htm zugreifen und ihn in „Hallo, mein Freund“ ändern möchten, können wir so schreiben:
parent.myH2.innerText="Hallo, 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.
Es ist zu beachten, dass Versionen vor Nestscape 6.0 das Iframe-Tag nicht unterstützen.
Beispiel:
<iframe src="Seite" width="Breite" height="Height" align="Die Anordnung kann links oder rechts sein, zentriert" scrolling="Wenn eine Bildlaufleiste vorhanden ist, geben Sie Nein oder Ja ein">< /iframe>
< IFRAME FrameBorder=0 FrameSpacing=0 Höhe=25 MarginHeight=0 MarginWidth=0 Scrollen=Nein
name=main src="/bgm/bgm.html" width=300></IFRAME>
Nach der Verwendung von iframe stellte ich fest, dass die Bildlaufleiste nicht schön ist und ich stattdessen zwei Bilder verwenden möchte ↑↓
Wie soll dies erreicht werden?
Antwort:
Ersetzen Sie <title>..</title> der Webseite durch den folgenden Code
<SCRIPT LANGUAGE="javascript">
Funktionen scroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: versteckt ;border-style:dashed;border-width:
1px,1px,1px,1px;">
Text<BR> Text<BR>
Text<BR>
Text<BR>
Wort
<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="Durch Drücken der Maus geht es schneller!
</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 nach unten, um es schneller zu machen!“></TD>
</TR>
</TABLE>
Der folgende Code kann die adaptive IFrame-Höhe implementieren, d. h. er passt sich automatisch an die Länge der Seite an, um zu verhindern, dass Bildlaufleisten gleichzeitig auf der Seite und im IFrame angezeigt werden.
Der Quellcode lautet wie folgt:
<script type="text/javascript">
//** Iframe passt sich automatisch an die Seite an**//
//Geben Sie eine Liste mit Namen von Iframes ein, deren Höhe automatisch an die Höhe der Seite angepasst werden soll
//Trennen Sie die ID jedes Iframes durch ein Komma. Beispiel: ["myframe1", "myframe2"], es kann nur eine Form geben, daher ist kein Komma erforderlich.
//Definieren Sie die ID des Iframes
var iframeids=["test"]
// Wenn der Browser des Benutzers Iframe nicht unterstützt, ob der Iframe ausgeblendet werden soll, ja bedeutet ausgeblendet, nein bedeutet nicht ausgeblendet
var iframehide="yes"
Funktion dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
// Iframe-Höhe automatisch anpassen
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (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;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //Wenn der Browser des Benutzers IE ist
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
// Behandeln Sie gemäß den eingestellten Parametern die Anzeigeprobleme von Browsern, die iframe nicht unterstützen
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
sonst wenn (window.attachEvent)
window.attachEvent("onload", dyniframesize)
anders
window.onload=dyniframesize
</script>
Andere URLs mit Referenzwert:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //Verwendung von in Webseiten eingebetteten Iframes
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //IFRAME-Objekt
http://www.hoyo.idv.tw/web-program/html/iframe.htm //Inline-Frame-Iframe