ich möchte hier ein mal eine Alternative zum <noscript> Tag aufzeigen. Ich nehme hier als Beispiel eine Navigation die mit Ajax arbeitet. Zum Verstehen ist es nicht relevant Ajax zu können!
Das Ziel ist es den Besucher nicht nur darauf hin zu weisen das in seinem Browser JavaScript deaktiviert ist, sondern gleich eine Alternative anzubieten.
Unschön zu lösen wäre es dem Besucher einen Link zu einer Alternativen Datei anzubieten:
- Code: Alles auswählen
<ul class="menu">
<noscript>
<li>
Ihr Browser unterstützt kein JavaScript,
bitte klicken Sie
<a href="noscript/index.htm">hier</a>
</li>
</noscript>
<li><a href="javascript: ajax('link1.htm');">Link 1</a></li>
<li><a href="javascript: ajax('link1.htm');">Link 2</a></li>
<li><a href="javascript: ajax('link1.htm');">Link 3</a></li>
</ul>
Wir benötigen für diese Lösung nämlich jede HTML Datei 2 mal, das ist bei 2-3 Seiten zu verkraften, nicht aber bei 200.
Was also tun?
Im ersten Schritt erstellen wir 2 Menüs, eines mit der Ajax Anweisung in den Links und eines mit normalen Verweisen:
- Code: Alles auswählen
<ul class="menu">
<li><a href="javascript: ajax('link1.htm');">Link 1</a></li>
<li><a href="javascript: ajax('link2.htm');">Link 2</a></li>
<li><a href="javascript: ajax('link3.htm');">Link 3</a></li>
</ul>
<ul class="menu">
<li><a href="link1.htm">Link 1</a></li>
<li><a href="link2.htm">Link 2</a></li>
<li><a href="link3.htm">Link 3</a></li>
</ul>
Nun ersetzen wir class="menu" mit IDs, das Ajax Menü erhält die ID menu_js, das normale Menü die ID menu:
- Code: Alles auswählen
<ul id="menu_js">
<li><a href="javascript: ajax('link1.htm');">Link 1</a></li>
<li><a href="javascript: ajax('link2.htm');">Link 2</a></li>
<li><a href="javascript: ajax('link3.htm');">Link 3</a></li>
</ul>
<ul id="menu">
<li><a href="link1.htm">Link 1</a></li>
<li><a href="link2.htm">Link 2</a></li>
<li><a href="link3.htm">Link 3</a></li>
</ul>
Nun kommen wir zum CSS Part.
Wir geben dem Ajax Menü folgende Eigenschaften:
- Code: Alles auswählen
ul#menu_js {
display: none;
}
Auf unserer Seite erscheint nun zunächst das normale Menü.
Nun kommt JavaScritp ins Spiel.
Der Trick:
Das Ajax Menü darf nur angezeigt werden wenn JavaScript aktiviert ist, also lassen wir es doch mit JavaScript anzeigen, wir schreiben eine Funktion die das normale Menü verbirgt und das Ajax Menü anzeigt, da dies nur geschehen kann wenn JavaScript aktiviert ist haben wir was wir wollen
Hier die JavaScript Funktion:
- Code: Alles auswählen
function scriptAvailability(v)
{
if(document.getElementById)
{
ele = document.getElementById(v);
ele_js = document.getElementById(v+'_js');
}
if(document.all)
{
ele = document.all.v;
ele_js = document.all.v+'_js';
}
alert(ele);
ele.style.display ="none"; // verberge das normale Menü
ele_js.style.display ="block"; // zeige das Ajax Menü
return true;
}
Nun müssen wir nur noch die Funktion aufrufen, entweder über den <body>-Tag:
- Code: Alles auswählen
<body onload="scriptAvailability('menu');">
Oder per Script Tag vor dem schließenden </body>:
- Code: Alles auswählen
<script>
scriptAvailability('menu');
</script>
</body>
Wollen wir das Ganze jetzt ein wenig dynamischer gestalten? Was wenn wir noch 3 weitere Elemente haben die wir überprüfen müssen?
Als erstes erstellen wir eine neue Funktion, diese entfernt Leerzeichen am Anfang und am Ende von Strings, diese wird später noch wichtig:
- Code: Alles auswählen
// funktion entfernt leerzeichen am anfang und ende von string
function trim(v)
{
while (' ' == v.substring(0,1))
{
v = v.substring(1, v.length);
}
while (' ' == v.substring(v.length-1, v.length))
{
v = v.substring(0, v.length-1);
}
return v;
}
Siehe auch: PHP - Trim
Als nächstes bauen wir unsere checkAvailability Funktion um, und zwar so das wir mehrere Elemente über die Variable v übertragen können, das Ganze sieht dann so aus:
- Code: Alles auswählen
function scriptAvailability(v)
{
var elements = v.split(","); // array aus v erstellen
for(var i = 0; i <= elements.length; i++) // array durchlaufen
{
v = trim(elements[i]); // leerzeichen entfernen
if(document.getElementById)
{
ele = document.getElementById(v);
ele_js = document.getElementById(v+'_js');
}
if(document.all)
{
ele = document.all.v;
ele_js = document.all.v+'_js';
}
ele.style.display ="none";
ele_js.style.display ="block";
}
return true;
}
Nun können wir die Funktion wie folgt aufrufen:
- Code: Alles auswählen
scriptAvailability('menu , ueberschrift , container');
Dank der trim Funktion können wir auch Leerzeichen mit einbringen, das ist in so fern wichtig weil manche Programmierer etwas anders schreiben als Andere, ein Beispiel:
- Code: Alles auswählen
testFunktion(parameter1,parameter2);
testFunktion(parameter1, parameter2);
Wir brauchen jetzt also nur jeweils 2 Elemente erstellen, IDs verteilen, _js an die ID mit dem Javascript anhängen, die ID_js ID per CSS ausblenden und die Funktion aufrufen.
Den kompletten Quellcode zum downloaden habe ich als Anhang hinzugefügt.
Viel Spaß beim rumprobieren, danke fürs Lesen und bis dann
