nicht angemeldet
Hallo,
Bevor ich mein Problem schildere möchte ich zunächst den Aufbau meiner Seite schildern:
Ich habe eine 2x2 Tabelle mit 4 iFrames f1,f2,f3 und f4.
das sind somit die Namen dieser IFrames.
In einer dieser iFrames möchte ich eine Lesezeichen-liste öffnen, mit der ich die URL einer per Radio-Box ausgewählten Frame ändere.
<form name="Fensterwahl">
<input type="radio" name="Fenster" value="'f1'"> Fenster 1
<input type="radio" name="Fenster" value="'f2'"> Fenster 2
<input type="radio" name="Fenster" value="'f3'"> Fenster 3
<input type="radio" name="Fenster" value="'f4'"> Fenster 4
</form>
Achtung: hier baust Du das erste Problem ein:
'f1'
ist nicht der gleiche Name wie
f1
Vom Grundsatz her [ref:self812;html/referenz/attribute.htm#id_idref_name@title=sind in Namen einfache Anführungszeichen nicht erlaubt].
Die vier von mir getesteten Browser (Firefox 10, IE 9, Opera 11.61 und der aktuelle Chrome haben diese Namen jedoch problemlos geschluckt - unter der Voraussetzung, dass auch die IFrames genauso hießen.
<td align="center"><img src="img/BILD.png" onclick="frames[parent.frames[document.radioWert(document.Fensterwahl.Fenster)].location.href='URL';"></td>
nein, so geht das nicht. Was soll document.radioWert() sein?
Rufen wir einfach beim onclick-Event die Funktion
showUriInSelectedFrame()
auf. Nun haben wir das Problem darauf reduziert, die Funktion zu schreiben, die die gewünschte URI im gewünschten Ziel-IFrame anzeigt :-)
Aufrufstelle:
[code lang=html]<td><img src="img/BILD.png" onclick="showUriInSelectedFrame();"></td>
Nun zur Funktion selbst:
~~~javascript
function showUriInSelectedFrame() {
// Zunächst müssen wir den ausgewählten Radiobutton finden
// Da die Radiobuttons den gleichen Namen aufweisen, erhalten wir
// mit document.Fensterwahl.Fenster die Liste aller Radiobuttons
// mit dem Namen "Fenster" im Formular mit dem Namen "Fensterwahl"
var liste = document.Fensterwahl.Fenster;
// Wir deklarieren eine Variable für den Namen des Zielframes
var target;
// Um den ausgewählten Radiobutton zu finden, durchlaufen wir die
// Liste der Radiobuttons und prüfen für jeden Radiobutton, ob die
// Eigenschaft [ref:self812;javascript/objekte/elements.htm#checked@title=checked] gesetzt ist.
for (var i = 0; i < liste.[ref:self812;javascript/objekte/elements.htm#length@title=length]; i++) {
if(liste[i].checked) {
// Wir haben den ausgewählten Radiobutton gefunden
// Der Wert dieses Radiobuttons ist der Name des Zielframes
target = liste[i].[ref:self812;javascript/objekte/elements.htm#value@title=value];
// Da es nur einen geben kann, können wir gleich aufhören
[ref:self812;javascript/sprache/schleifen.htm#break_continue@title=break];
}
}
// Die Zieluri für den Zielframe
// Bitte durch die von Dir gewünschte ersetzen :-)
var uri = "http://localhost/selfforum/nick.php";
// Wenn ein Radiobutton ausgewählt ist
if (target) {
// lade die gewünschte Zielseite im gewünschten IFrame
// des Elterndokumentes
parent.frames[target].location.href = uri;
}
else
// Oops! Da hat jemand vergessen, den Zielframe auszuwählen
alert("Sie müssen einen Zielframe auswählen!");
}
}
Nochmals die Knackpunkte:
- Namen von Zielframe und Werte der Radiobuttons müssen exakt übereinstimmen
- Elemente gleichen Namens sind eine Knotenliste und können wie ein Array angesprochen werden
- Du musst diese Liste durchlaufen, um den ausgewählten Button zu finden,
Tipps:
- Es ist sinnvoll, gültige Namen zu verwenden.
- Es ist sinnvoll, veraltete Attribute wie align nicht mehr zu verwenden,
sondern konsequent auf CSS zu setzen.
- Der Verzicht auf Frames und IFrames ist in den meisten Fällen ein Gewinn.
- Moderne Browser haben eine Fehlerkonsole, die sehr hilfreich sein kann.
Freundliche Grüße
Vinzenz
Matthias Apsel