Skript ergänzen

Hallo miteinander.
Ich möchte in folgenden Skript ergänzen, dass die Seite nach dem Wechsel des Stylesheets noch komplett geladen wird (mit window.reload). Geht das überhaupt?

Hier das Skript:

function changeStyle(title) {
var lnks = document.getElementsByTagName(‚link‘);
for (var i = lnks.length - 1; i >= 0; i–) {
if (lnks[i].getAttribute(‚rel‘).indexOf(‚style‘)> -1 && lnks[i].getAttribute(‚title‘)) {
lnks[i].disabled = true;
if (lnks[i].getAttribute(‚title‘) == title) lnks[i].disabled = false;
}}}

Herzlichen Dank für die Hilfe!
Gruss

Zuerst mal die Frage, was genau willst du erreichen, also ich habe es erstmal so verstanden, dass du per klick auf einen link das verwendete stylesheet der Seite gegen ein anderes austauschen willst.
dafür ist es nicht erforderlich die ganze Seite neu zu laden, du musst nur die dem link tag mit dem der default style geladen wird per javascript die neue url geben, dann laedt der Browser selbst das css nach und wendet es an. am einfachsten machst du das indem du dem link tag noch eine id gibst. (für getElementById)
Aber möglicherweise habe ich deine Frage auch falsch verstanden.

Entschuldige habe ich mich so unklar ausgedrückt… Aber du hast ganz exakt richtig verstanden, was ich will und das mit dem Link-Tag war genau die Lösung! Vielen, vielen herzlichen Dank für die superschnelle Antwort :smile: !

Hallo Philipp
Bim am Verzweifeln… es funktionierte einwandfrei, jetzt nicht mehr. Der Code im Head sieht u.a. wie folgt aus:

function changeStyle(title) {
var lnks = document.getElementsByTagName(‚link‘);
for (var i = lnks.length - 1; i >= 0; i–) {
if (lnks[i].getAttribute(‚rel‘).indexOf(‚style‘)> -1 && lnks[i].getAttribute(‚title‘)) {
lnks[i].disabled = true;
if (lnks[i].getAttribute(‚title‘) == title) lnks[i].disabled = false;
}}}

Und der Link wie folgt:
Zur klassischen Ansicht wechseln

So müsste es doch gehen, oder? Beim Testen im Browser wechselt es, aber auf dem Android-Handy nicht :frowning:

Sieht du vielleicht, wo der Hund begraben liegt?

Merci :smile:
Gruss, Mirjam

Hallo Mirjam,
das neu Laden nach dem Wechsel des Stylesheets sollte nicht notwendig sein. Im Gegenteil mit window.reload() sollte die Seite im Normalzustand neu geladen werden (wie mit F5 oder dem Reaload-Button). Dann würde der vorherige Wechsel des Stylesheets in meinen Augen keinen Sinn ergeben.

Ich habe den von Dir geposteten Code nicht im Detail geprüft. Wo liegt denn konkret das Problem das mit dem reload gelöst werden soll?

Hier noch ein Link zum Thema Stylesheets und disabled: (Vielleicht hilfts)
http://stackoverflow.com/questions/10564806/html-lin…

Viele Grüße von IchSchwarzAlles

Hallo IchSchwarzAlles :smile: !

Ganz herzlichen Dank für die Antwort. Ich versuche :frowning: verzweifelt folgendes:

Ich habe mehrere CSS-Files eingebunden wie folgt:

Wenn ich also mit dem Smartphone auf die Seite gehe, wird das CSS handheld.css eingebunden. Nun möchte ich einen Link machen „Auf klassische Ansicht wechseln“ und wenn ich auf diesen Link klicke, dann sollte das CSS mit dem Titel ‚classic‘ eingebunden werden.

Das habe ich versucht per Javaskript:

function changeStyle(title) {
var lnks = document.getElementsByTagName(‚link‘);
for (var i = lnks.length - 1; i >= 0; i–) {
if (lnks[i].getAttribute(‚rel‘).indexOf(‚style‘)> -1 && lnks[i].getAttribute(‚title‘)) {
lnks[i].disabled = true;
if (lnks[i].getAttribute(‚title‘) == title) lnks[i].disabled = false;
}}}

Wenn ich den Link einfüge wie folgt

Klassische Ansicht ansehen

geht der Link zwar wieder auf die Hauptseite (und die Seite wird somit neu geladen - diese Problem ist also gelöst), aber wieder mit dem Stylesheet handheld.css.

Es wäre sehr, sehr lieb, falls du mir helfen könntest! Komme einfach nicht weiter… Möchte dies mit Javaskript und nicht per PHP lösen.

Vielen herzlichen Dank!

Viele Grüsse aus der sonnigen Schweiz!

aus meiner sicht müsste das mit einem
window.location.reload();
gehen

Hallo Mirjam,
beim obigen Code sehe ich keinen Grund warum die Seite neu geladen werden sollte. Der Link „#“ zeigt auf die aktuelle Seite und im Javascript ist kein reload o.ä. zu finden.

Auf der verlinkten Seite findet sich auch ein (hoffentlich) korrektes Beispiel, um mit dem disabled Attribute umzugehen:

(…)

document.getElementById(‚first_style‘).removeAttribute(‚disabled‘);

Denn scheinbar interessiert den Browser hier nur ob das Attribut disabled existiert oder nicht und nicht ob es true oder false ist. Daher disabled entfernen, wenn ein Style aktiv sein soll.

Aber:
Diese Auswahl gilt (wenn sie nicht geladen wird) nur einmal für die aktuelle Seite. Sie muss in irgendeiner Form gespeichert werden, damit das Javascript beim nächsten Aufruf wieder automatisch weiß welches CSS gewählt werden soll.

Das wäre entweder in Form eines Cookies (am naheliegensten), oder „Local Storage“ oder in dem ein Parameter der Seiten-URL angehängt wird (welcher in Javascript dann beim Seitenstart ausgewertet werden müßte).

Du mußt Dich glaube ich noch etwas mit Deinem Grundverständnis von Webseiten beschäftigen :wink:
Webseiten „vergessen“ wenn Sie neu geladen wurden quasi alles was vorher mit Javascript eingestellt wurde. Daher der Umstand mit Cookies, Session-Ids (für z.B. PHP) und ähnlichem.

Alternativ kann man natürlich auch je nach Webseitendesign auf das neu laden der Seite evtl. verzeichten und per „Ajax“ nur Teile der Seite neu laden/ersetzen. (Z.B. mit Hilfe von JQuery).

Grüße von IchSchwarzAlles

Herzlichen Dank für die ausführliche Antwort. Ja, das mit dem Vergessen beim Reload habe ich auch schon gelernt… :wink:

So einfach wie ich mir das vorgestellt habe, ist es also nicht und ich werde wohl noch länger rumbasteln…

Nochmals merci!

Kannst du einmal das ganze Script bzw. HTML-Dokument posten (auch 2 Stylesheets) und genau erklären, was du machen willst?

Herzlichen Dank für die Antwort. Ich versuche folgendes:

Ich habe mehrere CSS-Files eingebunden wie folgt:

Wenn ich also mit dem Smartphone auf die Seite gehe, wird das CSS handheld.css eingebunden. Nun möchte ich einen Link machen „Auf klassische Ansicht wechseln“ und wenn ich auf diesen Link klicke, dann sollte das CSS mit dem Titel ‚classic‘ eingebunden werden.

Das habe ich versucht per Javaskript:

function changeStyle(title) {
var lnks = document.getElementsByTagName(‚link‘);
for (var i = lnks.length - 1; i >= 0; i–) {
if (lnks[i].getAttribute(‚rel‘).indexOf(‚style‘)> -1 && lnks[i].getAttribute(‚title‘)) {
lnks[i].disabled = true;
if (lnks[i].getAttribute(‚title‘) == title) lnks[i].disabled = false;
}}}

Wenn ich den Link einfüge wie folgt

Klassische Ansicht ansehen

geht der Link zwar, aber die Seite wird wieder mit dem Stylesheet handheld.css geladen.

Hab mir das glaub alles zu einfach vorgestellt… Die Seite müsste ja neu geladen werden (weil gewisse Bilder neu geladen werden müssen) und dann müsste sich der Browser auch noch merken (mit Cookie?), dass wenn eine andere Seite angeklickt wird, er diese wieder im „klassischen“ Layout lädt…

Aber vielleicht hast mir einen Typ, wo ich mich schlau machen kann oder wo es ein solches Javaskript gäbe?!

Gruss,
mirti

Hab dir mal was zusammengeschrieben (auch mit jquery für das Merken des aktuellen Scriptes)

übrigens lag das Problem an:
media=„screen and (max-device-width:899px)“

deswegen hat der nicht aktualisiert.
media=„screen“ sollte es sein.

Den Viewport bzw. breite kannst du anders festlegen:

www.mediaevent.de/css/viewport-mobile.html

@viewport {
width: 320px;
zoom:1;
}

meine Datei heißt:
test.php

nach dem Switchen des Styles wird der Status per unsichtbaren Request dem Server mitgeteilt und als Session gespeichert.

beim nächsten harten Aufruf wird die aktuelle CSS Datei als letztes geladen.
Wenn das nicht funktioniert, wird dennoch bei document.ready noch einmal ein style-Switch durchgeführt aber diesmal mit Modus 0, damit nicht noch ein Request an per AJAX an den Server geht.

<?php session_start();
if (isset($\_GET['action'])) { $action=(int)$\_GET["action"]; $stylesheet=$\_GET["stylesheet"]; if ($action==1) { ///aktuellen Stylesheet speichern $\_SESSION["aktuellesstylesheet"]=$stylesheet; exit(); } } ?\><?php if ($_SESSION["aktuellesstylesheet"]=="") //noch nichts gesetzt
{ $\_SESSION["aktuellesstylesheet"]="style"; //was wird als erstes geladen? } $stylesheets=array(); $stylesheets[]="style"; $stylesheets[]="handheld"; $ausgabe=''; $ausgabealsletztes=''; foreach ($stylesheets as $item) { if ($\_SESSION["aktuellesstylesheet"]==$item) //Wenn es dem aktuellem Stylesheet entspricht, wird es als letztes geladen { $ausgabealsletztes=' '; } else { $ausgabe=' '; } } echo $ausgabe; echo $ausgabealsletztes; ?\> $( document ).ready(function() { \<?php if ($\_SESSION["aktuellesstylesheet"]!="") //noch nichts gesetzt { echo "changeStyle('".$\_SESSION["aktuellesstylesheet"]."',0);"; //was wird als erstes geladen? } ?\> }); function ajaxurltoserver(url,title) { var jqxhrsx = $.ajax({ type: 'GET', url: url, scriptCharset: "utf-8" , contentType: "application/x-www-form-urlencoded; charset=UTF-8", cache: false }).done(function( html ) { //Wenn fertig, dann kann auch Infoausgabe aktualisiert werden if (document.getElementById('divaktuellesstylesheet')) { document.getElementById('divaktuellesstylesheet').innerHTML=title; } }); } function changeStyle(title,mode) { var lnks = document.getElementsByTagName('link'); for (var i = lnks.length - 1; i \>= 0; i--) { if (lnks[i].getAttribute('rel').indexOf('style')\> -1 && lnks[i].getAttribute('title')) { if (lnks[i].getAttribute('title') == title) {void(lnks[i].disabled = false); if (mode==1) //im Modus 0 (document.ready) wird nicht nochmal ein extra Request abgesetzt { ajaxurltoserver('test.php?action=1&stylesheet='+title,title); } } else {void(lnks[i].disabled = true); //alert(lnks[i].getAttribute('title') + ' deaktiviert');} }}} } Klassisch | Handheld **TEST1** <?php echo "aktuell geladenes Stylesheet ist ".$\_SESSION["aktuellesstylesheet"].""; ?\>

es könnte noch interessant sein über Javascript gleich zu ermitteln, ob es sich um ein mobiles Endgerät handeln könnte.

anstatt von confirmation(); könntest du dann einfach den Styleswitcher für Handheld ausführen.

php-Seitig könnte man das auch machen und gleich die Session setzen.
Da gibt es reichlich zum Austoben.

function confirmation() {
var answer = confirm(„Willst du die mobile Version benutzen?“)
if (answer){
window.location = „https://www.seitexyz.de/mobil.php“;
}
else
{
window.location = „https://www.seitexyz.de/index.php“;
}
}

// User-Agent-String auslesen
var UserAgent = navigator.userAgent.toLowerCase();

// User-Agent auf gewisse Schlüsselwörter prüfen
if(UserAgent.search(/(iphone|ipod|opera mini|palm|blackberry|android|symbian|series60)/)>-1){
// mobiles Endgerät
confirmation();
}
else{
///normaler Browser
}

Wow, du bist toll! Werde mir das ganze mal in Ruhe zu Gemüte führen und ausprobieren!

Herzlichen Dank :smile: !