Teil einer URL mit JS ersetzen und Seite neu laden

[Sven Rautenberg]

Moin!

Ich arbeite zur Zeit an einer Website, in der mehrere Farbversionen vorgesehen sind, unter denen der User wählen kann.
Dafü möchte ich eine Navigation auf der Seite anbieten, die durch einen Klick die andere Version der Seite läd.

Nun habe ich keine Ahnung wie ich den Javascriptcode schreiben muss.
Mein erster (ganz simpler) Ansatz war folgender:

Ich möchte einfach nur einen Teil der URL ersetzen, damit die Seite aus einem anderen Ordner geladen wird und ich keine direkten Links setzen muss und die Naviagtion beliebig erweitern kann! ... anstatt (farbe1) z.B. (farbe2) , oder (farbe3) usw.

<script type="text/javascript">
<!--
function replaceurl()
{
a = (document.location.href);

b = a.replace(/farbe1/,farbe2);

document.location.href = b;

//-->
</script>
......

im body dann:  <a href="javascript: replaceurl()">SUPERLINK</a>

Wenn du deine Seitenstruktur absolut identisch (nur mit anderen Inhalten) in verschiedenen Hauptverzeichnissen replizierst, kannst du eine schöne Lösung so realisieren:

Die Funktion basiert darauf, dass als erstes in der URL ein immer die gleiche Anzahl an Zeichen langer String das Verzeichnis bestimmt.

function changelang(to_lang)
{
  window.location.href = "/"+to_lang+window.location.pathname.substring(3)+window.location.search
  return false;
}

Wie vielleicht zu erkennen ist, habe ich die Funktion geschrieben, um in der URL vorne /XX/hiergehts/weiter.html jeweils zwei beliebige Zeichen durch den Inhalt des Parameters to_lang zu ersetzen. Für "schnell-schnell" reicht das - und meine beiden Hauptverzeichnisse heißen "/de/" und "/en/" - es geht also um eine Sprachauswahl, aber genausogut kann man damit Farben wählen.

Der Clou kommt jetzt:
<a href="/en/index.html" onclick="return changelang('en');">

Mit diesem Link kommen alle Javascript-Nutzer auf die identisch benannte Seite im Verzeichnis "/en/", alle Nicht-Javascript-Nutzer kommen aber wenigstens auf die Startseite dieser Sprache. Deine Besucher können also in jedem Fall über die Links eine Farbe wählen und sich dann innerhalb dieser Farbe bewegen. Der Farbwechsel funktioniert überall, die Leute mit Javascript kommen sogar auf die zugehörige Seite.

Wenn dir dieses Prinzip für javascript-lose Besucher nicht gefällt: Du hast PHP! Damit kann man diesen Workaround (den ich mir ausgedacht habe, weil das benutzte CMS-System das nicht ohne Mega-Aufwand kann) gleich ganz weglassen.

Wenn du mit PHP weißt, wo du bist (und die Variable $_SERVER['PHP_SELF'] sagt es dir), dann kannst du den Link immer dynamisch zusammenbasteln und links dann vollkommen ohne Javascript auf die anderen Farben. Das Prinzip der Dateinamenersetzung bleibt dabei grundsätzlich gleich.

Wenn du eine schöne Lösung bastelst, dann packst du die Ausgabe der Farbwahl-Links gleich in eine schöne Funktion. Wenn du gut bist, kriegst du auch unterschiedlich lange Verzeichnisnamen hin (schließlich ist das erste Verzeichnis ja eindeutig am "/" zu erkennen).

- Sven Rautenberg