<iframe>

Wechselrahmen innerhalb von Webseiten

Das HTML-Element <iframe> erlaubt die Einbettung kompletter Webseiten innerhalb anderer Seiten. Sehen sie hier einige der interessante Möglichkeiten dieser Technik.
HTML HyperText Markup Language - Einbettung
<iframe> Standard-Beispiel
Wechselrahmen Austausch von Inhalten
Zurück ... Austausch von Inhalten mit "eingefrorener history"
Dynamische Webseiten Interaktive Steuerung der Rahmenseite mit Formular
Scrollbox mit CSS Rollbalken begrenzen übergroße Elemente.
Sichtbarkeit Mit CSS ein/aus/um-schalten
Bilder Wechselrahmen mit variabler Ausrichtung und Größe
Javascript Programme in anderen Rahmen ausführen
Alternativ-Code Wenn der Browser keine Innenrahmen kennt...
Probleme CSS-Fehler gängiger Browser
Google Maps Anwendungs-Beispiel: Einbettung von Landkarten
HTML 5 x

<iframe>
Rechts ein <iframe>-Innenrahmen
Darin ist eine komplette andere Webseite eingebettet.

Die Größe des Rahmens wird vorgegeben - Wenn der Inhalt mehr Platz braucht, dann wird er mit Rollbalken angezeigt. Das ist ideal zur platzsparenden Anzeige langer Tabellen, großer Bilder, etc.

Dieser Link startet ein Javascript-Alarmfenster in der eingebetteten Webseite. Details dazu im Kapitel Javascript dieser Seite.

Der Inhalt des Rahmens ist eine ganz normale Webseite. Klicken sie test.htm, um die gleiche Seite in einem eigenen Fenster zu öffnen.
So sieht der HTML-Quellcode eines eingebetteten Rahmen aus.
● Das src-Attribut enthält einen Verweis auf jene Webseite, die hier eingebettet werden soll.
● Der Code 'im Inneren' des <iframe>-Elements sollte dann ausgeführt werden, wenn der Browser keinen <iframe> anzeigen kann.
<iframe src="test.htm" id="if1" name="if1" style="height:300px; width:100%;">
Ihr Browser kann keinen iframe anzeigen.<br />
Link zum <a href="test.htm">Inhalt</a><br />
</iframe>

id und name

Vergeben sie für jedem Innenrahmen die Attribute id und name, beide mit dem genau gleichen Namen. 		In diesem Fall funktionieren sowohl die klassischen und z.T. veralteten Funktionen (name) als auch die modernen DOM-Funktionen und Methoden (id). In XHTML wird das Attribut name zwar toleriert aber ignoriert.

Wechselrahmen
Angezeigt wird test.htm
Auswahl: Keine Webseiten:

Klicken sie einen der Links, um den Inhalt des Wechselrahmens auszutauschen.
Der Austausch der Inhalte erfolgt durch einfache Hyperlinks (<a>-Elemente).
Dabei muss als Verweisziel (target) der Name des <iframe> (hier: if2 ) angeführt werden. 		Der Wechselrahmen in HTML:
<iframe id="if2" name="if2" src="test.htm" style="height:300px; width:100%;">
</iframe>
Bedienungs-Link:
<a href="test.htm" target="if2">test.htm</a>
Hier wird gezeigt, wie man das Attribut src eines <iframe> mit Javascript lesen oder schreiben ( = austauschen) kann.

Die Möglichkeit, Inhalt Live (nach dem Laden der Hauptseite) auszutauschen, unterscheidet <iframe> von <object>, wo genau das nicht möglich ist.

Das Kapitel Bilder dieser Seite zeigt einige praktische Tricks zur Verwendung von Bild-Wechselrahmen. 		Bedienungs-Link mit Javascript:
<a href="javascript:xchg("if2","test.htm"> test.htm</a>
Javascript:   Inhalt eines <iframe> austauschen
function xchg(id,datei) {
var n=document.getElementById(id);
alert("src(alt)="+n.src);
n.src=datei;
alert("src(neu)="+n.src);
}

History

history) eingetragen. 		Wenn sie danach die"Zurück"-Taste ihres Browsers klicken, dann wird der Rahmen-Inhalt zurück-getauscht, nicht - wie sie vielleicht erwarten - diese Webseite durch die vorige ausgetauscht.
Umgehung dieses Problems im Kapitel Eingefrorene History

Eingefrorene History (Besuchs-Chronik)

History

Wenn man den Inhalt eines Rahmens mit einem HTML-Link oder durch Änderung seines src-Attributs mit Javascript austauscht, dann wird das im Verlauf (history) eingetragen.
Demonstration im Kapitel Wechselrahmen dieser Seite. 		Wenn sie danach die"Zurück"-Taste ihres Browsers klicken, oder mit Javascript die Methode history.back() ausführen, dann wird der Rahmen-Inhalt wieder zurück-getauscht.
Das kann zur Verwirrung ihrer BesucherInnen führen, die meist erwarten, dass die "Zurück-Taste" auf die gastgebende Webseite wirkt.

Beispiel:

Der Inhalt dieses Rahmens (rechts) kann beliebig oft ausgetauscht werden, ohne die history zu verändern. Tauschen sie den Rahmen mehrmals und klicken sie dann die Zurück-Taste ihres Browsers.
Achtung - Das Beispiel funktioniert nur dann wie erwartet, wenn sie noch keinen anderen Rahmen von anderen Beispielen dieser Seite ausgetauscht haben !

Programmierung:

Hier wird angenommen, dass der <iframe> mit dem Namen if8 bezeichnet ist.

Variante 1:
Die Javascript-Methode location.replace wird direkt angewendet. Wenn die Methode von der gastgebenden Webseite verwendet wird, dann muss das Verweis-Ziel (hier if8 ) angegeben werden.

Variante 2:
Benötigt eine Javascript-Funktion. Hat dafür den Vorteil, dass man die Funktion mit zusätzlichen Befehlen erweitern kann: Diese werden augeführt, wenn der Rahmen-Inhalt getauscht wird. 		Javascript-Funktion in der eingebetteten Webseite (für Variante 2):
function my_replace(newsrc) {
location.replace(newsrc);
}

Hyperlink auf der gastgebenden (dieser) Webseite
<a href="javascript:location.replace('histest_2.htm')" target="if8">
Variante 1</a>
<a href="javascript:my_replace('histest_2.htm')" target="if8">
Variante 2</a>

Hyperlinks auf der eingebetteten Webseite
<a href="javascript:location.replace('histest_2.htm')">
Variante 1</a> <a href="javascript:my_replace('histest_2.htm')">
Variante 2</a>

Dynamische Webseiten in Rahmen
Steuerung mit einem Formular:  
Probetext
1 3 5 10 Wiederholungen
 

Steuerung mit Javascript (Details unten)
Test mit unterschiedlichen Texten:
● Geben sie einen Probetext ein und klicken sie 'Absenden':
Wenn im Wechselrahmen eine dynamische Webseite geladen ist, dann lässt sich diese mit Formular-Daten der gastgebenden Seite steuern.

Der Inhalt des HTML-Formulars wird an jene Datei übergeben, die im action-Attribut genannt ist.
Das ist zwar immer die gleiche Datei, sie enthält jedoch ein PHP-Script, welches nach ihren Angaben (dynamisch) reagiert.

● Die übergebenen Daten können Zeichen aller Sprachen (Unicode) enthalten,
● Diese Hauptseite enthält nur Standard HTML und etwas Javascript !

♦ Details zur Übergabe von Argumenten (Parametern) an ein PHP-Script-Programm.
<form name="form3" method="get" action="test1.php" target="if3">
<input type="text" name="prob"> Probetext<br>
<input name="mul" type="radio" value="1"> 1
...
<input name="mul" type="radio" value="10"> 10 <br>
<input type="submit" name="submit" value="Absenden">
</form>
...
<iframe id="if3" name="if3" src="test1.php">
</iframe>
● Steuerung der dynamischen Rahmen-Seite mit Javascript:
Im Beispiel wird gezeigt, wie die Argument-Daten der URI-Befehlszeile nach dem Dateinamen und einem ?-Zeichen übergeben werden:
Jeweils in der Form name=wert, voneinander getrennt durch &-Zeichen.
► Test von my_submit_a.
Diese Variante ändert die Formular-Daten nicht. Sie funktioniert auch ganz ohne Formular.
♦ Details auf der Webseite zum Thema URI.
function my_submit_a() {
var n=document.getElementById("if3");
var txt="test1.php?mul=2&prob=abc";
n.src=txt;
}
● Alternativ gibt eine weitere Möglichkeit, mit Verwendung des Formulars: Man kann mit Javascript Daten in ein Formular eintragen und dieses mit Methode submit absenden. Das wird leider von einigen Browsern unterbunden.
► Test von my_submit_b.
function my_submit_b() {
document.form3.mul.value="3";
document.form3.prob.value="abc 123 xyz";
// nicht mit M$IE und iframes ?:
document.form3.submit();
}
Sparsam und schnell ! Diese Methode verwendet die verfügbaren Resourcen besonders sparsam: Der gleichbleibende Teil einer Webseite wird als klassische HTML-Webseite erstellt.
► Die dynamischen Inhalte werden in eigene dynamische Teil-Seiten ausgelagert und auf Innenrahmen der Hauptseite angezeigt.
► Das entlastet den Webserver mehrfach: Der gleichbleibende Hauptteil wird vom Browser nur einmal angefordert, in günstigen Fällen (bereits im Browser-Cache vorhanden) gar nicht.
► Die dynamischen Teile sind wesentlich kleiner und daher vom Server schneller zu verarbeiten und über das Internet schneller zu versenden.
► Darüber hinaus lässt sich Geschwindigkeit oft durch Verlagerung von Server-Programmteilen (Perl, PHP) zum Client (Javascript) bedeutend steigern - Fast alle interaktiven Funktionen dieser Seite werden von Javascript auf ihrem eigenen (Client)-PC ausgeführt.

CSS ScrollBox
Wenn es nur darauf ankommt, einen größeren Inhalt auf einen bestimmten Bereich (Box) einer Webseite zu begrenzen, dann braucht man weder <object> noch <iframe>:
CSS bietet die Eigenschaft overflow, die auf einfachem Wege genau diese Aufgabe erledigt.
Das funktioniert für fast alle Objekte, z.B. jedoch nicht mit allen Browsern . .
Das ist ein Probetext. Der Text wird mehrmals wiederholt, damit der reservierte Platz verbraucht wird.
Wenn der Text größer wird, dann richtet der Browser Rollbalken ein, mit denen man im Bereich navigieren kann.
Das ist ein Probetext. Der Text wird mehrmals wiederholt, damit der reservierte Platz verbraucht wird.
Wenn der Text größer wird, dann richtet der Browser Rollbalken ein, mit denen man im Bereich navigieren kann.
Das ist ein Probetext. Der Text wird mehrmals wiederholt, damit der reservierte Platz verbraucht wird.
Wenn der Text größer wird, dann richtet der Browser Rollbalken ein, mit denen man im Bereich navigieren kann.
Das ist ein Probetext. Der Text wird mehrmals wiederholt, damit der reservierte Platz verbraucht wird.
Wenn der Text größer wird, dann richtet der Browser Rollbalken ein, mit denen man im Bereich navigieren kann.
Genug gesehen ?
Rechts der Quelltext der rechts oben gezeigten ScrollBox.
Begrenzen sie Höhe und Breite der Box und setzen sie die style-Eigenschaft overflow:scroll
Tipp: <div>-Elemente nehmen ohne sonstige Anweisung 100% der Breite des Eltern-Elements ein. Manche Browser ergeben leider unterschiedliche Fehler mit und ohne ausdrückliche Festlegung der Breite.
<div style="height:100px; width:100%; overflow:scroll;">
Das ist ein Probetext. Der Text wird ...
</div>

Sichtbarkeit ein/aus-schalten
Umschaltung mit Mausklick: Mit den CSS Eigenschaften display oder visibility lässt sich die Sichtbarkeit beliebiger Objekte einer Webseite ein/aus/um-schalten, z.B. auch eines <iframe>
Das ist der Inhalt eines <div>-Elements. Mit den Javascript-Funktionen wird eine der style-Eigenschaften 'display' oder 'visibility' abwechselnd ein- und ausgeschaltet.
Klicken sie z.B. hier, um diesen Text auszublenden und den Innenrahmen anzuzeigen.
HTML-Quellcode:
Der Trick: Beide Elemente werden angelegt, eines davon wird abwechselnd versteckt.
Die beiden Elemente <iframe> und <div> sind in gleicher Größe, jedoch genau umgekehrter Sichtbarkeit display hintereinander angelegt.
Die beiden Elemente werden mit Hilfe ihrer id-Attribute adressiert und mit Javascript manipuliert.
<iframe id="if5" src="test2.htm" style=" display:inline; height:100px; width:100%;">
</iframe>

<div id="d5" style="display:none; height:100px; width:100%;">
Das ist der Inhalt ...
</div>
Diese einfache Javascript-Funktion schaltet je nach Argument ('a' oder 'b') entweder das <iframe> oder das <div>-Element sichtbar und umgekehrt.

Mit dieser Methode können sie eine beliebige Anzahl von Objekten einer Webseite sichtbar / unsichtbar schalten.
Nachteil gegenüber Wechsel-Rahmen:
Alle Elemente müssen in der Webseite angelegt werden, auch dann, wenn sie niemals angezeigt werden.
function d5demo(ab) {
var n1=document.getElementById("if5");
var n2=document.getElementById("d5");
if(ab=="a") {
n1.style.display="inline";
n2.style.display="none";
}
else {
n1.style.display="none";
n2.style.display="inline";
}
}
Manuelle Bedienung der Javascript-Funktion:
Erfolgt durch Anklicken von HTML-Hyperlinks.
♦ Details zu CSS und zu den CSS-Eigenschaften display und visibility.
<a href="javascript:d5demo('a')" target="_self">iframe</a><br />
<a href="javascript:d5demo('b')" target="_self">div</a>

Bilder @ Rahmen
Innenrahmen können auch Bilder enthalten. Dabei sind die Möglichkeiten interessant, die Anzeige mit Javascript zu steuern. Eine einfache Alternative ist die Möglichkeit, große Bilder in ener CSS-Scrollbox anzuzeigen.
Bedienungs-Elemente
Breite (CSS-Eigenschaft width):
►   40%,   50%,   60%,   75%
Höhe (CSS-Eigenschaft height):
►   200px,   300px,   400px
Ausrichtung:
►   left,   right   (mit CSS-float)
►   left,   right   (mit Attribut align)
►   left,   right   (mit Trick)
Bildwechsel:
►   GIF,   JPEG,   PNG,   SVG,  
Skalierung:
►   50%,   75%,   100%,   150%,   200%,  
Das Bild ist in einen Standard Innenrahmen eingebettet. Die Höhe wird absolut in Bildpunkten (300px) angegeben, die Breite relativ zur gesamten verfügbaren Breite (50%). HTML: Einbettung des Bilder-Rahmens in diese Webseite:
<iframe id="if6" src="test.gif" style="height:300px; width:50%;">
</iframe>
Zur Steuerung des Innenrahmens werden nach Möglichkeit DOM-Methoden eingesetzt:
Der <iframe> wird dazu mit seinem id-Attribut ( if6 ) adressiert. 		Javascript: Änderung von Höhe, Breite und Bild-Datei
var n=document.getElementById("if6");
n.style.height="200px";
n.style.width="50%";
n.src="neues_bild.gif";
Ausrichtung:
▼ Die CSS-Eigenschaft float wird zwar beim Laden dieser Seite korrekt berücksichtigt, kann jedoch aus unbekannten Gründen mit keinem der gängigen Browser Live geändert werden.
► Das eigentlich veraltete Attribut align kann von gängigen Browsern gelesen und Live geändert werden. Allerdings erfolgt die tatsächliche Umgestaltung der Seite je nach Browser erst dann, wenn auch andere Eigenschaften (z.B. Breite) geändert werden.
Sie können das Live testen, indem sie zuerst das Attribut align ändern und danach Höhe oder Breite.
► Trick zur Ausrichtung mit Javascript: Zuerst wird die aktuelle Breite gelesen, dann die Ausrichtung geändert, zuletzt die (gleiche) Breite wieder geschrieben.
▼ M$IE wehrt sich auch dagegen: Man muss die Breite auf einen anderen Wert setzen als vorher. In einem weiteren Schritt wird die Breite danach wieder auf ihren Original-Wert gesetzt. 		Die CSS-Eigenschaft float wird (derzeit) nicht Live geändert:
n.style.float="left";

So wird die aktuelle Breite gelesen:
var w=n.style.width;

Das Attribut align wird geändert:
n.setAttribute("align","left");
Das funktioniert mit allen modernen Browsern. Nur für M$IE muss eigens ein neuer Attribut-Knoten erzeugt werden:
var att=document.createAttribute("align");
att.nodeValue="left";
n.setAttributeNode(att);

Zuletzt wird die aktuelle Breite geschrieben und damit die Umgestaltung der Webseite ausgelöst:
n.style.width=w;
Skalierung:
Der Inhalt eines Rahmens kann nicht skaliert (vergrößert oder verkleinert werden). Dazu wurde ein weiterer Trick angewendet:
► In den Innenrahmen wird eine Mini-Webseite geladen, die nur das gewünschte Bild enthält. Das <img>-Element wird mit CSS formatiert und erhält im id-Attribut einen eindeutigen Namen.
► Danach kann das Bild mit Javascript skaliert werden, so wie rechts gezeigt.
► Die Methoden zum Starten von Javascript-Programmen in einem Innenrahmen finden sie im nächsten Kapitel. 		HTML-Code zur Einbettung eines <img>-Elements
<img id="demo" src="bild.gif" style="height:100px; width:100px;" />
Javascript-Code zur Verkleinerung des Bildes auf 50%:
var n=document.getElementById("demo");
n.style.height="50px";
n.style.width="50px";

Z

Javascript @ Rahmen
Javascript bietet interessante Möglichkeiten zur Steuerung von Innenrahmen. Sie werden hier (z.T. als Wiederholung nochmals) zusammengefasst.

Link zu einem eigenen JS-Programm

Zuerst zum Vergleich ein HTML-Link, mit dem ein Javascript-Programm auf der gleichen Webseite gestartet wird. Ein derartiger Link funktioniert in jedem Rahmen, d.h. sowohl auf der gastgebenden als auch auf der eingebetteten Seite.
► Genau der gleiche HTML-Code auf einer Webseite in einem <iframe> startet ein JS-Programm auf der jeweils eingebetteten 'eigenen' Seite.
► Die Festlegung mit Attribut target ist stärker als alle anderen: Sie gilt zwar nur für einen einzigen Link, jedoch auch dann, wenn das Verweisziel für den Rahmen oder für die Webseite anders festgelegt wurde. (siehe folgende Absätze).
In einem derartigen Fall ist die Angabe des Attributs target="_self" notwendig, um ein 'eigenes' JS-Programm zu starten.
HTML-Link zu einem 'eigenen' JS-Programm:
<a href="javascript:alarmfenster()" target="_self"> Click </a>
Mit Click starten sie ein Javascript-Programm dieser Webseite.

► Im ersten und zweiten Kapitel dieser Webseite kann die Seite test.htm eingebettet werden. Sie enthält Links zum Start von Javascript-Programmen im eigenen Rahmen (Child) und in der gastgebenden Seite (Parent).

Link zu einem fremden JS-Programm

So sieht ein HTML-Link zum Start eines JS-Programms, das sich auf einer Webseite in einem anderen Rahmen befindet.
► Das Verweisziel (target) muss den Namen des Rahmens tragen (hier if1 ).
► Alternativ können JS-Programme auch in jedem anderen Rahmen gestartet werden, z.B. im Navigations-Rahmen auf der linken Seite.
► Sie müssen ein JS-Programm des festgelegten Namens (hier alarmfenster ) auf jeder Webseite bereithalten, die im Ziel-Rahmen eingebettet werden könnte - Sonst gibt es eine Fehlermeldung.
► Diese Festlegung gilt nur für einen einzigen Link und ist stärker als das Verweisziel des Rahmens oder der Webseite.
HTML-Link zu einem JS-Programm der im Innenrahmen if1 eingebetteten Webseite:
<a href="javascript:alarmfenster()" target="if1"> Click </a>
Mit Click starten sie ein Javascript-Programm auf jener Webseite, die im Innenrahmen if1 (erstes Kapitel dieser Seite) eingebettet ist.

Das funktioniert mit jeder Art von Rahmen, nicht nur mit Innenrahmen.
Live-Demo: Auslösung von JS-Programmen im Navigations-Rahmen (linke Seite)

Verweisziel für einen Rahmen

So wird das Verweisziel (target) eines ganzen Rahmens festgelegt.
► Das Ziel gilt für jede dort eingebettete Webseite. Es kann jedoch auf jeder Seite und für jeden Link anders festgelegt werden.
► Im Beispiel wird das Ziel fz festgelegt. Es gilt sowohl für 'gewöhnliche' HTML-Links (zum Austausch von Webseiten) als auch für Javascript-Links.
► Bei Click auf einen JS-Link einer beliebigen in if1 eingebetteten Webseite wird das JS-Programm daher im Rahmen fz gesucht.
<iframe id="if1" name="if1" src="test.htm" target="fz">
</iframe>

Verweisziel für eine Webseite

So wird das Verweisziel (target) einer einzelnen Webseite festgelegt.
► Das Ziel gilt für alle Links der Webseite (Austausch von Webseiten und JS-Links). Es kann jedoch für jeden Link individuell anders festgelegt werden.
► Diese Festlegung ist 'stärker' als jene für den Rahmen, d.h. sie gilt auch dann, wenn für den Rahmen ein anderes Ziel festgelegt wurde.
<html>
<head>
...
<base target="fz" />
</head>
<body> ... </body>
</html>

Javascript ruft Javascript

Innerhalb von Javascript-Programmen können andere Programme aufgerufen werden.
► Angeforderte Programme werden ohne besondere Vereinbarung auf der gleichen Webseite gesucht.
► Im Beispiel wird das JS-Programm meldung interaktiv gestartet. Darin wird das JS-Programm sub1 aufgerufen.
► Im nächsten Absatz wird gezeigt, wie man aus dem Programm meldung JS-Programme in anderen Rahmen aufrufen kann. 		Javascript:
function meldung() {
sub1();
}
function sub1() {
alert("Alarmfenster mit sub1 ");
}
HTML:
<a href="javascript:meldung()"> Meldung </a>

Javascript in einem anderen Rahmen

Ein JS-Programm kann auch Programme in anderen Rahmen aufrufen. Als 'Adresse' wird die Objekt-Hierarchie angegeben, ausgehend vom eigenen Dokument.
Rechts einige Beispiele dazu.
► Ein Innenrahmen <iframe> ist stets ein Child des eigenen Dokuments.
► Aus Sicht einer eingebetteten Webseite ist die gastgebende Seite der Parent-Rahmen. 		Varianten für den Aufruf eines JS-Programms sub1
Im eigenen Dokument:
sub1();
In einem Child-Rahmen (z.B. <iframe> ):
if1.sub1();
Im übergeordneten Parent-Rahmen:
parent.sub1();
In einem anderen Child fz des eigenen Parent:
parent.fz.sub1();

Austausch des Rahmen-Inhalts

Wird im Kapitel Wechselrahmen dieser Seite Live demonstriert. 		Inhalt von Rahmen if1 austauschen
function set_frame_src() {
var n=document.getElementById("if1");
n.src="neue_seite.htm";
}

Dynamischer Rahmen

Wenn im Rahmen eine dynamische Webseite eingebettet ist, dann kann man Daten (Argumente) an diese Seite senden.
Wird im Kapitel Dynamischer Rahmen dieser Seite Live demonstriert. 		Daten an die Seite im Rahmen if3 senden
function my_submit_a() {
var n=document.getElementById("if3");
var txt="test1.php?prob=Neue+Daten";
n.src=txt;
}
Sparsam und schnell ! Javascript ist schneller !
Je mehr Funktionen vom Webserver zum Client verlagert werden, umso schneller funktioniert ihre Lösung:
► Am Client-PC ist fast immer ungenutzte Prozessor-Leistung verfügbar: Lassen sie möglichst viele Arbeiten an den Client-PC ausführen, vor allem interaktive Programmteile.
► Das entlastet den Webserver und macht ihn daher für alle User schneller.
► Ein am Client-PC ausgeführtes Javascript-Programm ist typisch 100-1000mal schneller als auf ein vergleichbares Programm des Webservers und die Übersendung der erzeugten Webseite zu warten.

Alternativ-Code
Der gesamte Quelltext innerhalb eines <iframe>-Elements wird nur dann ausgeführt, wenn der jeweilige Browser keine <iframe>-Elemente verarbeiten kann oder darf.
Dieser Aspekt wird wenig beachtet, da alle gängigen Browser Innen-Rahmen unterstützen. 		♣ Es ist guter Stil, dort einen manuell bedienbaren Link zum gleichen Ziel einzufügen. So kann ein/e AnwenderIn notfalls mit Mausklick zur ansonsten eingebetteten Webseite gelangen.

Quelltext

Es gibt Anwendungen, die eine Webseite nicht interpretieren (d.h. HTML-Anweisungen ausführen) sondern den Quelltext lesen. Dazu zählen u.a. die Robots (Bots, Spiders, ..) der Suchmaschinen.
Man kann dieses Verhalten dazu nutzen, um Botschaften an diese Programme unterzubringen, die für normale BesucherInnen unsichtbar bleiben.
♣ Im Sinne einer guten Web-Promotion sollte man den Alternativ-Code dazu benutzen, wichtige Stichworte zum Thema des Webs und der Webseite unterzubringen.

DOM

Der Alternativ-Code wird jedoch von gängigen Browsern nicht (oder nicht vollständig) in den Objekt-Baum des Webseiten-Dokuments eingebaut.
Es ist daher nicht möglich (zumindest sehr unzuverlässig), dort Informationen zur späteren Auswertung mit → DOM-Methoden unterzubringen !
• Man kann problemlos das src-Attribut des <iframe>-Elements lesen oder ändern. (Beispiele "Wechsel-Rahmen").
• Das href-Attribut eines im Alternativ-Code enthaltenen <a>-Links ist jedoch entweder null oder ergibt beim Lesen einen Fehler !

Browser und CSS-Probleme

<iframe>-Elemente

funktionieren mit gängigen Browsern und Versionen ausgezeichnet.
Einige Punkte erfordern jedoch besondere Maßnahmen. (Das kann sich in neuen Versionen bereits geändert haben).
<object>-Elemente funktionieren derzeit weniger gut. In Zukunft (↓ HTML 5) wird jedoch die Anzahl und Bedeutung von Einbettungs-Elementen stark zunehmen.
Übergeordnetes (parent) Element:
▲ Die CSS-Eigenschaft padding wird korrekt berücksichtigt.
Wenn sie einen <iframe> in ein anderes Element einbetten, dann sollten sie dessen padding abschalten, (hier z.B. in der Zelle einer Tabelle <td style="padding:0px;">
CSS padding steuert den Abstand innerhalb eines Elements, CSS margin den Abstand außerhalb eines Elements.
<iframe>-Element:
▼ CSS background-color funktioniert nur bei Gecko-Browsern (Firefox, Mozilla, ..) so wie erwartet. M$IE setzt die Hintergrund-Farbe zwangsweise auf weiß und ignoriert diese CSS-Eigenschaft im <iframe>-Element völlig. Opera reagiert ähnlich, mit kleinen Unterschieden beim Außenrand.
Setzen sie background-color:#FFF auf weiß, wenn das zum Layout passt - so sieht ihr <iframe> mit allen Browsern gleich aus.
▼ CSS padding funktioniert nur bei Opera so wie erwartet, sollte daher besser nicht verwendet werden.
▼ Rahmen: CSS border wird von M$IE ignoriert. Der (ansonsten bei M$IE zwangsweise) Rahmen kann nur mit dem veralteten Attribut frameboder="0" abgeschaltet werden.
<body> der eingebetteten Webseite:
► CSS margin hat ist je nach Browser eine andere Standard-Einstellung. margin steuert den Abstand außerhalb eines Elements.
Standard bei Gecko-Browsern ist 9px, bei M$IE 10-11px, bei Opera 5-6px.
Sie können die Einstellung natürlich ändern, bei Opera allerdings nie <5px
Bei anderen Browsern ist auch margin:0px möglich. Mit einem Javascript-Programm lässt sich der Rand für alle Browser gleich einstellen.
▼ M$IE zeigt ein unangenehmes Verhalten, wenn der Inhalt zu groß für das äußere Element ist: Erstens werden immer beide Rollbalken (scrollbars) angezeigt, auch dann, wenn nur einer notwendig wäre.
▼ Zweitens wird der Inhalt nicht um die Breite der Rollbalken verkleinert, deshalb verdecken die Rollbalken (nur bei M$IE) immer einen Teil (16px) des Inhalts. Es ist möglich, auch dieses Problem mit einem Javascript-Programm zu korrigieren.
Beispiel für die übergeordnete (parent) Webseite:
<td style="padding:0px;">
<iframe src="inhalt.htm" id="if1" name="if1" style="background-color:#FFF; height:150px; width:100%;">
Link zum <a href="inhalt.htm">Inhalt</a><br>
</iframe>
</td>

Beispiel: CSS-Anpassung im Inhalt eines <iframe>, z.B. inhalt.htm
<html>
<head>
<title>iframe-Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body{margin:10px;}
</style>
<script type="text/javascript">
function my_onload() {
body_margin_adjust();
body_margin_framescroll();
}
// Browser: M=M$IE, N=Gecko(Firefox,Mozilla,Netscape,..), O=Opera
var brs1 = navigator.appName.substr(0,1).toUpperCase();
function body_margin_adjust() {
// Korrigiert den body-margin auf den eingestellten Wert
var n=document.getElementsByTagName("body")[0];
var mt=0; var ml=0; var mr=0; var mb=0;
try{ // M$IE
mt=n.currentStyle.marginTop;
ml=n.currentStyle.marginLeft;
mr=n.currentStyle.marginRight;
mb=n.currentStyle.marginBottom;
}
catch(e) {}
try{ // Mozilla, Opera
mt=window.getComputedStyle(n,null).marginTop;
ml=window.getComputedStyle(n,null).marginLeft;
mr=window.getComputedStyle(n,null).marginRight;
mb=window.getComputedStyle(n,null).marginBottom;
}
catch(e) {}
// Zahl isolieren
mt.match(/([0-9]*)/); mt=parseInt(RegExp.$1,10);
ml.match(/([0-9]*)/); ml=parseInt(RegExp.$1,10);
mr.match(/([0-9]*)/); mr=parseInt(RegExp.$1,10);
mb.match(/([0-9]*)/); mb=parseInt(RegExp.$1,10);
// Opera
if(brs1=="O") {
mt-=4; if(mt<0) {mt=0;}
ml-=4; if(ml<0) {ml=0;}
mr-=4; if(mr<0) {mr=0;}
mb-=4; if(mb<0) {mb=0;}
n.style.marginTop=mt.toString()+"px";
n.style.marginLeft=ml.toString()+"px";
n.style.marginRight=mr.toString()+"px";
n.style.marginBottom=mb.toString()+"px";
}
}

function body_margin_framescroll() {
// Anpassung des body-margin nur bei M$IE und scrollbars
if(brs1=="M") {
var n=document.getElementsByTagName("body")[0];
mr=n.currentStyle.marginRight;
mr.match(/([0-9]*)/);
mr=parseInt(RegExp.$1,10);
mr+=16;
n.style.marginRight=mr.toString()+"px";
}
}
</script>
</head>
<body onload="my_onload()">
. . .
</body>
</html>

HTML 5
In der nächsten Version HTML 5 werden zwar die Elemente <frameset> und <frame> abgeschafft, das Element <iframe> wird jedoch weiter verwendet.
Die Einbettung von Objekten in Webseiten wird an Bedeutung stark zunehmen. 		Zur Einbettung dienen u.a. diese Elemente:
<audio>, <canvas>, <embed>, <iframe>, <img>, <object>, <video>

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   HTML