Link in spezifischer parent.frame öffnen

[sirmathew]

hi,

nach zahlreichen Eigenversuchen und ewigem Suchen, habe ich beschlossen, meine Frage nun hier zu stellen, da ich weiß, dass hier sehr kompetente Personen helfen.

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.
In einer dieser iFrames möchte ich eine Lesezeichen-liste öffnen, mit der ich die URL einer per Radio-Box ausgewählten Frame ändere.

Derzeit sieht das ungefähr so aus:

  
<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>  
  
<table vspace="15" border="0" cellpadding="1" cellspacing="2">  
 <tbody>  
  <tr>  
   <td align="center"><img src="img/BILD.png" onclick="frames[parent.frames[document.radioWert(document.Fensterwahl.Fenster)].location.href='URL';"></td>  
  </tr>  
 </tbody>  
</table>  
<table>

*die Adresse auf die ich verlinke habe ich aus Gründen der Einfachheit hier mit URL abgekürzt.

Ohne die Vorgabe des iFrames in der Radio-Box funktionierte der Link folgendermaßen:

  
...  
   <td align="center"><img src="img/lotterie.png" onclick="parent.frames['f1'].location.href='URL';"></td>  
...  

Ich möchte Euch schon im Vorraus für Eure (hoffentlich^^) hilfreichen Antworten danken.

Mit Freundlichen Grüßen,
SirMathew

[Matthias Apsel]

Om nah hoo pez nyeetz, sirmathew!

Trenne dich von
  * Frames
  * Layouttabellen
  * JavaScript zur Verlinkung
  * veralteten Attributen, Gestaltung gehört ins CSS

Zeig die Seite, die es werden soll und dir wird geholfen.

Matthias

[sirmathew]

Om nah hoo pez nyeetz, sirmathew!

Trenne dich von
  * Frames
  * Layouttabellen
  * JavaScript zur Verlinkung
  * veralteten Attributen, Gestaltung gehört ins CSS

Zeig die Seite, die es werden soll und dir wird geholfen.

Matthias

Matthias, Friede sei auch in deinem Herzen :)

Nunja, die Seite ist mittlerweile sehr komplex und auch personalisiert. Ich würde es gerne vermeiden private Seiten/Server durch mein Posting hier zu veröffentlichen.
Allgemein kann ich darüber sagen, dass meine Webseite für Freunde von mir ist, die das gleiche MMORPG mit mir spielen.
Eine veränderte Kopie ist zu finden unter: http://bit.ly/x5rPZr

...Links sind umbenannt und diejenigen, die zu externen Seite führen, enden alle bei google (kann nicht in einer frame angezeigt werden)
...Bilder behalten ihre Größe, werden umbenannt und sind nur ein rotes Rechteck mit einer Zahl. (ausgenommen der Logi von Teamspeak und YouTube)

mfg,
Matthias alias SirMathew :-)

[sirmathew]

Zeig die Seite, die es werden soll und dir wird geholfen.

Oh! Da habe ich wohl die Seite die es werden soll vergessen ;-)

Ich möchte die Lesezeichen.html von meiner Seite mit der Lesezeichen_2.html ersetzen ... nur halt funktionierend ;)

*mit funktionierend meine ich, dass der Radio-Button vorgibt, in welcher der iFrames aus der Main.html sich der Link öffnet.

[Matthias Apsel]

Om nah hoo pez nyeetz, sirmathew!

So richtig vermag ich nicht zu helfen, weil ich auch nicht wirklich dahintersteige, was du vorhast.

Was mir aufgefallen ist:

value="'f1'" soll bestimmt value="f1" heißen

Matthias

[sirmathew]

value="'f1'" soll bestimmt value="f1" heißen

du hast recht - ich hatte das mit den hochkommata einfach mal ausprobiert, nachdem es als einfaches "f1" nicht funktionierte

[Vinzenz Mai]

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

[sirmathew]

Vielen Dank Vinzenz,
das ist eine sehr ausführliche und detaillierte Lösung meines Problems.

Leider ist sie mir nur zu spät aufgefallen und ich habe bereits eine um ein vielfaches aufwändigere Variante erfunden:

Zunächst habe ich die die Tabellenzellen vervierfacht und die jeweilige Ziel-frame-URL angepasst - Jetzt verwende ich die Radiobuttons um Javascripte auszuführen, die einfach die 'falschen' Zellen ausblenden. Ebenfalls wird bei <body onload=""> die Funktion lesezeicheneins aufgerufen.

function lesezeicheneins() {  
  
  document.getElementById('l1a').style.display = "table-cell";  
  document.getElementById('l1a').setAttribute("colspan","4");  
  document.getElementById('l2a').style.display = "none";  
  document.getElementById('l3a').style.display = "none";  
  document.getElementById('l4a').style.display = "none";  
  document.getElementById('l1b').style.display = "table-cell";  
  document.getElementById('l1b').setAttribute("colspan","4");  
  document.getElementById('l2b').style.display = "none";  
  document.getElementById('l3b').style.display = "none";  
  document.getElementById('l4b').style.display = "none";  
  document.getElementById('l1c').style.display = "table-cell";  
  document.getElementById('l1c').setAttribute("colspan","4");  
  document.getElementById('l2c').style.display = "none";  
  document.getElementById('l3c').style.display = "none";  
  document.getElementById('l4c').style.display = "none";  
  document.getElementById('l1d').style.display = "table-cell";  
  document.getElementById('l1d').setAttribute("colspan","4");  
  document.getElementById('l2d').style.display = "none";  
  document.getElementById('l3d').style.display = "none";  
  document.getElementById('l4d').style.display = "none";  
  document.getElementById('l1e').style.display = "table-cell";  
  document.getElementById('l1e').setAttribute("colspan","4");  
  document.getElementById('l2e').style.display = "none";  
  document.getElementById('l3e').style.display = "none";  
  document.getElementById('l4e').style.display = "none";  
  document.getElementById('l1f').style.display = "table-cell";  
  document.getElementById('l1f').setAttribute("colspan","4");  
  document.getElementById('l2f').style.display = "none";  
  document.getElementById('l3f').style.display = "none";  
  document.getElementById('l4f').style.display = "none";  
  document.getElementById('l1g').style.display = "table-cell";  
  document.getElementById('l1g').setAttribute("colspan","4");  
  document.getElementById('l2g').style.display = "none";  
  document.getElementById('l3g').style.display = "none";  
  document.getElementById('l4g').style.display = "none";  
  }

usw. für die anderen Frames. (eine menge copy-paste-Arbeit ^^)

mfg,
der Unbelehrbare ;) alias SirMathew alias Matthias :)