Zusammenfassung der HTML-Iframe-Nutzung, Sammlung_HTML/Xhtml_Webseitenproduktion

Iframe-Nutzungsanalyse
Wird verwendet, um einen schwebenden Rahmen oder Container für Text oder Grafiken festzulegen.
BORDER

Legen Sie die Kantenbreite um den Rahmen fest
FRAMEBODER
AUTO )
SRC
Geben Sie die von IFRAME aufgerufene Datei oder das Bild an (HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
„Bild-in-Bild“-Effekt – Diskussion über die Verwendung von IFRAME-Tags
Auf heutigen Websites ist die Internetgeschwindigkeit etwas langsam, aber auf fast jeder Seite müssen einige Banner platziert werden , Kolumnenbilder, Urheberrechte usw. Natürlich ist gegen viele ähnliche Dinge aufgrund der Notwendigkeit eines einheitlichen Website-Stils und der Werbewirkung nichts einzuwenden, aber schließlich wird der Geldbeutel des Benutzers durch diese „Verschönerung“ immer mehr geraubt "Dinge. Gibt es eine Möglichkeit, dies zu ermöglichen? Nach dem einmaligen Herunterladen dieser ähnlichen Dinge besteht keine Notwendigkeit, sie erneut herunterzuladen, sondern es werden nur die Webseiteninhalte mit geänderten Inhaltsbereichen heruntergeladen?
Die Antwort lautet definitiv: Iframe-Tag anwenden!
1. Die Verwendung von Iframe-Tags
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. Es scheint zu langweilig, Seite für Seite zu erstellen. Zu diesem Zeitpunkt dachte ich plötzlich, ob es eine Möglichkeit gibt, andere Teile beizubehalten Der Inhalt der Seite bleibt unverändert. Erstellen Sie einfach das Tutorial. Es wird zu einer seitenweisen Inhaltsseite ohne andere Inhalte. Wenn Sie auf den Link zum Auf- und Abwärtsklicken der Seite klicken, wird nur der Teil des Tutorialinhalts geändert, und die anderen Teile bleiben unverändert. Dies spart zum einen Zeit und zum anderen ist es auch sehr praktisch, wenn das Tutorial in Zukunft drei lange und zwei kurze Änderungen aufweist und sich nicht auf die gesamte Armee auswirkt, was noch wichtiger ist: Werbebanner, Spaltenlisten usw. 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 Format des
Iframe-Tags ist:

Kopieren Sie den Code

Der Code lautet wie folgt:

🎜>src: Datei Der Pfad kann eine HTML-Datei, Text, ASP usw. sein;

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

Scrollen: wenn angegeben Die HTML-Datei von SRC befindet sich im angegebenen Bereich. Wenn die Bildlaufoption nicht angezeigt oder abgeschlossen ist und sie auf „NEIN“ eingestellt ist, wird die Bildlaufleiste nicht angezeigt, wenn sie auf „Ja“ eingestellt ist. es wird angezeigt;
FrameBorder: die Breite des Bereichsrandes, um eine „Bild-in-Bild“-Überblendung mit angrenzendem Inhalt zu ermöglichen, normalerweise auf 0 eingestellt.
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

>
2. Die gegenseitige Kontrolle zwischen dem übergeordneten Formular und dem schwebenden Rahmen wird in der Skriptsprache und Objekthierarchie als übergeordnetes Formular bezeichnet, während der schwebende Rahmen als untergeordnetes Formular bezeichnet wird Die Beziehung 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 Unterformular im übergeordneten Formular zu und steuern Sie diese.
Im übergeordneten Formular ist der Iframe oder das Unterformular ein untergeordnetes Objekt des Dokumentobjekts, und Sie können im Skript direkt auf das Unterformular zugreifen. Objekte in .
Jetzt 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:

Code kopieren

Der Code lautet wie folgt:

test.htm-Dateicode ist:
,mein Junge< /h1>



Wenn wir den Text im H1-Tag mit der ID-Nummer myH1 ändern möchten , meine Liebe, es kann verwendet werden:
document.myH1.innerText="Hallo, meine Liebe" (Dokument kann weggelassen werden)

In der Datei example.htm ist das Unterformular, auf das das Iframe-Tag-Objekt zeigt Im Einklang mit dem allgemeinen DHTML-Objektmodell ist die Objektzugriffskontrollmethode dieselbe und wird nicht erneut beschrieben.
2. Auf Objekte im übergeordneten Formular im Unterformular zugreifen und diese steuern.
Im Unterformular können wir über das übergeordnete (übergeordnete) Objekt auf die Objekte im übergeordneten Fenster zugreifen.
Zum Beispiel example.htm:

Code kopieren

Der Code lautet wie folgt:

< ;html>

Hallo, meine Frau

;



Wenn wir mit der ID-Nummer myH2 auf den Titeltext zugreifen und ihn in „Hallo, mein Freund“ ändern möchten, können wir so schreiben :
parent.myH2.innerText="hello,my friend"
Das übergeordnete Objekt stellt hier das aktuelle Formular dar (das Formular, in dem sich example.htm befindet). Sie müssen auf die Objekte im übergeordneten Formular zugreifen Untergeordnetes Formular, ohne Ausnahme. Alles erfolgt ü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 beim Programmieren viel mühsame Handarbeit! 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 um ihrer selbst willen (die Website), aber auch für Internetnutzer, um Internetgebühren zu sparen, warum nicht?
Beispiel





Code kopieren

Der Code lautet wie folgt: < iframe src= "Seite" width="width" height="height" align="Die Anordnung kann links oder rechts sein, zentriert" scrolling="Wenn eine Bildlaufleiste vorhanden ist, geben Sie Nein oder Ja ein" >

2 :::::::::::::::::::::::::::::::::::::::: ::::::::::::: ::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::

Nach der Verwendung von iframe stellte ich fest, dass die Bildlaufleiste nicht schön ist und ich möchte 2 Bilder verwenden, um es zu ersetzen. ↑↓

Wie soll es umgesetzt werden?
Antwort:
Ersetzen Sie

durch den folgenden Code: Kopieren Sie den Code


Der Code lautet wie folgt :

文字 文字 文字 文字 文字

内框架Iframe的使用
使用Iframe可以在一人表格内调用一个外部文件，是非常有用的。本网站在很多页面上都使用了iframe效果.
现在我们学一下Iframe标记的使用.
Iframe标记的使用格式是:

复制代码

代码如下:

当你想用父框架控制内部框架时,可以使用: target="框架的名字"来控制.
IFrame也可以编辑文字
有没有想过除了表单(

)之外还有其它的网页元素可以编辑文字呢？只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器.





其中designMode属性表示IFrame的设计模式的状态（开/关）,还在犹豫什么呢，快试试吧！
只要巧妙的利用这一特性就可以制作很多意想不到的效果.如果下面我们来做一个图片编辑器.







Hier noch einige Ergänzungen:

Breite ist die Breite der eingefügten Seite; Höhe ist die Höhe der eingefügten Seite; Scrollen gibt an, ob die Seiten-Bildlaufleiste angezeigt werden soll (optionale Parameter sind „Auto“, „Ja“, „Nein“, wenn dieser Parameter weggelassen wird, ist der Standardwert „Auto“) ); Frameborder-Randgröße;
Hinweis: Es wird empfohlen, absolute Pfade für URLs zu verwenden
Die Legende lautet: . .
Beispiel 2.
Wenn eine Seite einen Frame enthält. . Klicken Sie einfach auf den Link auf der Seite und bitten Sie darum, sie in diesem Ändern Sie dann den Standardöffnungsmodus: Fügen Sie < zur Webseite hinzu href=URL target=**>oder der Zielrahmen des Teillinks ist auf (**) gesetzt
　Beispiel 3.
Um eine Seite einzufügen. Bitten Sie darum, nur den Mittelteil zu nehmen. Ich will nichts anderes. ,. .
　Code:
,
Scrollen gibt an, ob die Bildlaufleiste der Seite angezeigt werden soll , optional Die Parameter sind auto, ja und nein. Wenn dieser Parameter weggelassen wird, ist der Standardwert auto.
2. Der Hyperlink verweist auf die eingebettete Webseite. Benennen Sie einfach den Iframe. Die Methode ist , dann sollte die Hyperlink-Anweisung auf der Webseite wie folgt geschrieben werden: 3. Wenn Frameborder auf 1 gesetzt ist, ist der Effekt wie folgt: Textfeld
Verwendung von transparentem IFRAME
Es muss von IE5.5 oder höher unterstützt werden
Im Tag der Datei transparentBody.htm habe ich style="background-color=transparent" hinzugefügt „Durch die folgenden vier IFRAMEs sollten Sie meiner Meinung nach ein klares Verständnis davon haben, wie Sie den Iframe-Hintergrundtransparenzeffekt implementieren:
IFRAME>
Punkt 1: Verwenden Sie Javascript, um die Quelle des Iframes anzugeben und laden Sie den Iframe neu (siehe mein Projekt am Ende dieses Artikels)
Schwierigkeit 1: Legen Sie die Hintergrundfarbe des Iframes fest
a. htm
<script>function setBG(){ <br>var strColor=document.bgColor <br>frm.document.bgColor=strColor; 🎜><body style='background-color:red' onload='setBG()'><br><iframe src='about:blank' name=frm></iframe> : <br>Fenster und schwebender Rahmen Gegenseitige Kontrolle zwischen <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. Es ist wichtig, die Beziehung zu klären zwischen den beiden, denn wenn Sie auf ein Unterformular in einem übergeordneten Formular zugreifen oder umgekehrt, müssen Sie die Objekthierarchie kennen, bevor Sie über ein Programm auf das Formular zugreifen und es steuern können. <br> 1. Auf Objekte im Unterformular im übergeordneten Formular zugreifen und diese steuern <br> Im übergeordneten Formular ist der Iframe oder das Unterformular ein untergeordnetes Objekt des Dokumentobjekts. Sie können direkt im Skript auf die Objekte zugreifen. <br> 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. <br> Betten Sie beispielsweise die Datei test.htm in example.htm ein und steuern Sie einige Tag-Objekte in test.htm: <br>　　<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe> <br>test.htm文件代码为: <br>　　<html> <br>　　　<body> <br>　　　　<h1 id="myH1">hello,my boy</h1> <br>　　　</body> <br>　　</html> <br>　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用: <br>　　document.myH1.innerText="hello,my dear"(其中，document可省) <br>　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。 <br>　　2、在子窗体中访问并控制父窗体中对象 <br>　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。 <br>　　如example.htm： <br>　　<html> <br>　　　<body onclick="alert(tt.myH1.innerHTML)"> <br>　　　　<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe> <br>　　　　<h1 id="myH2">hello,my wife</h1> <br>　　　</body> <br>　　</html> <br>　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写： <br>　　parent.myH2.innerText="hello,my friend" <br>或者parent.document.getElementById("myH2").innerText="hello,my friend" <br>　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。 <br>3:frame的一个子元素访问frame的另一个子元素 <br>例如：框架文件frame.html中嵌入了另外两个html文件 <br><div styleClass="basewnd"> <br><!-- 搜索 --> <br><div id="search" name="test" align="center" class="top_list_home"> <br><iframe id="frameSearch" name="search" src="Search.html" frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe> <br></div> <br><!-- 单位目录树 --> <br><div align="center" class="welcome_tag_home"> <br><iframe src="DirectoryTree.html" frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe> <br></div> <br></div> <br>那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的<font></font>标签的innerHTML属性，则可以这样： <br>alert(parent.document.search.section.innerHTML), <br>其中search是“搜索”div的id，或者： <br>alert(parent.document.getElementById("search").section.innerHTML), <br>或者也可以这样： <br>alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe) <br>　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。 <br>　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。 <br>　　要注意的是，Nestscape6.0之前版本不支持Iframe标记。 <br>　　例子： <br>1::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: <br><iframe src="页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是否有滚动条可以填no或yes"></iframe> <br><IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" width=300></IFRAME> <br>2::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: <br>用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓ <br>应该怎么实现呢？ <br>回答： <br>用下列代码替换网页的<title>..</title> <br><SCRIPT LANGUAGE="javascript"> <br>function scroll(n) <br>{temp=n; <br>Out1.scrollTop=Out1.scrollTop+temp; <br>if (temp==0) return; <br>setTimeout("scroll(temp)",80); <br>} <br></SCRIPT>

文字 文字 文字 文字 文字
	< / TD>

:::::::::::::::: :::: ::::::::::::::::::::::::::::::::::::::::::: :::::::::: ::
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 vermeiden, dass Bildlaufleisten gleichzeitig auf der Seite und im IFrame angezeigt werden .
Der Quellcode lautet wie folgt

HTML

被引用的文件UserLogin.html:

会员登录

用户名：
密码：

现在假设“最新主题列表”文件中有一个超链接, 点击其,包含“最新主题列表”的iframe就重新加载，此时需要利用javascript来实现：
www.baidu.com