it-swarm.com.de

CSS-Stylesheets mit Javascript neu laden

Ich möchte alle CSS-Stylesheets in einer HTML-Seite über Javascript neu laden, ohne die Seite neu zu laden.

Ich brauche dies nur während der Entwicklung, um CSS-Änderungen zu berücksichtigen, ohne die Seite ständig zu aktualisieren.

Eine mögliche Lösung ist das Hinzufügen eines ?id=randomnumber-Suffixes zu css hrefs mit Javascript, aber das möchte ich nicht. 

Ich möchte das Stylesheet neu laden auf irgendeine Weise, ohne die URL zu ändern, und der Browser entscheidet, ob er eine neue Version dieser css laden muss oder nicht (wenn der Server mit einem 304 - Not modified antwortet).

Wie soll ich das erreichen?

14
Tamás Pap

Im einfachen Javascript:

var links = document.getElementsByTagName("link");

for (var x in links) {
    var link = links[x];

    if (link.getAttribute("type").indexOf("css") > -1) {
        link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
}

In jQuery:

$("link").each(function() {
    if $(this).attr("type").indexOf("css") > -1) {
        $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
    }
});

Stellen Sie sicher, dass Sie diese Funktion laden, nachdem der DOM-Baum geladen wurde.

9
Dillen Meijboom

Es gibt viel bessere Wege, um dies zu erreichen:

Ich brauche dies nur während der Entwicklung, um CSS-Änderungen zu berücksichtigen, ohne die Seite ständig zu aktualisieren.

Eine Möglichkeit ist die Verwendung von Grunt.js zum watch für Dateiänderungen und dann livereload der Seite.

Der Workflow sieht so aus:

  • Speichern Sie das CSS-Dokument
  • Grunt Watch sieht die Veränderung
  • live lädt die CSS auf der Seite neu

Dies kann mit anderen Grunt-Funktionen verkettet werden, z. B. mit der {sass | less | stylus} -Prozessor-Kompilierung, um einen Workflow wie folgt zu erstellen:

  • speichern Sie eine Sass-Datei
  • uhr sieht Veränderung
  • sass wird zum cdn-standort kompiliert und minimiert
  • neue CSS wird auf die Seite geladen

Andere Frontend-Automatisierungsressourcen:

Video von einem Google-Mitarbeiter: http://www.youtube.com/watch?v=bntNYzCrzvE

http://sixrevisions.com/javascript/grunt-tutorial-01/

http://aboutcode.net/vogue/

3
Michael Jasper

Fügen Sie Ihren Stylesheet-Link-Tags zunächst eine ID (falls nicht vorhanden) hinzu:

<link id="mainStyle" rel="stylesheet" href="style.css" />

Fügen Sie anschließend in Javascript (auch unter Verwendung von jQuery) die folgende Funktion hinzu:

function freshStyle(stylesheet){
   $('#mainStyle').attr('href',stylesheet);
}

Zum Schluss lösen Sie die Funktion für Ihr gewünschtes Ereignis aus:

$('#logo').click(function(event){
    event.preventDefault();
    var restyled = 'style.css'; 
    freshStyle(restyled);
});

Durch die Aktualisierung des Werts des verknüpften Stylesheets zwingen Sie den Client, selbst wenn er denselben Wert hat, erneut zu suchen. Wenn dies der Fall ist, wird die neueste Datei angezeigt und (erneut) geladen.

Wenn Sie Probleme mit dem Cache haben, fügen Sie eine zufällige Versionsnummer (psuedo) an Ihren Dateinamen an:

var restyled = 'style.css?v='+Math.random(0,10000);

Hoffe das hilft. Die oben genannten Beispiele von Dillen funktionieren auch, aber Sie können dies verwenden, wenn Sie nur ein oder mehrere Stylesheets mit geringfügigen Anpassungen anvisieren möchten.

2
ChongFury

Im Google Chrome-Browser ist das ganz einfach.

Drücken Sie die Taste F12, klicken Sie auf das Zahnrad in der rechten unteren Ecke und wählen Sie die Option Cache deaktivieren (während DevTools geöffnet ist).

enter image description here

enter image description here

0
Warlock

Eine Alternative für Grunt wäre die Verwendung von Prepros .

Es verwendet auch einen Datei-Watcher für Ihren Projektordner, jedoch für alle Ihre Dateien. (js, css, php) und laden Sie die Seite bei jeder Änderung neu. (+ Wenn dies eine kleine visuelle Änderung wie css ist, wird die Seite nicht aktualisiert, sondern ein sanfter Übergang. (Funktioniert für Farben, Positionierung usw.))

Wie Grunt kompiliert und minimiert es Ihre Dateien und ermöglicht es Ihnen, eine Live-Vorschau für eine angegebene URL (nicht nur localhost) zu erstellen. (Es gibt viele weitere Funktionen)

Über einen speziellen Port werden sogar Ereignisse synchronisiert wie clic, Mausrad, Eingaben usw. 

0
Humbertda