wake-up-neo.com

Wie lade ich CSS-Dateien mit Javascript hoch?

Ist es möglich, CSS-Stylesheets mit Javascript in eine HTML-Seite zu importieren? Wenn ja, wie geht das?

PS: Das Javascript wird auf meiner Seite gehostet, aber ich möchte, dass Benutzer in der Lage sind, das <head> Tag ihrer Website, und es sollte in der Lage sein, eine auf meinem Server gehostete CSS-Datei in die aktuelle Webseite zu importieren. (Sowohl die CSS-Datei als auch die Javascript-Datei werden auf meinem Server gehostet).

284
Click Upvote

Hier ist die "alte Schule", die hoffentlich in allen Browsern funktioniert. Theoretisch würden Sie setAttribute verwenden, der IE6 unterstützt dies jedoch nicht konsequent.

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

In diesem Beispiel wird überprüft, ob das CSS bereits hinzugefügt wurde, sodass es nur einmal hinzugefügt wird.

Fügen Sie diesen Code in eine Javascript-Datei ein, lassen Sie den Endbenutzer einfach das Javascript einbinden und stellen Sie sicher, dass der CSS-Pfad absolut ist, damit er von Ihren Servern geladen wird.

VanillaJS

Hier ist ein Beispiel, das einfaches JavaScript verwendet, um einen CSS-Link in das head -Element basierend auf dem Dateinamen der URL einzufügen:

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

Fügen Sie den Code direkt vor dem schließenden Tag head ein, und das CSS wird geladen, bevor die Seite gerendert wird. Verwendung eines externen JavaScript (.js) wird ein Flash mit nicht gestalteten Inhalten ( FOUC ) angezeigt.

383
user58777

Wenn Sie jquery verwenden:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
63
BoumTAC

Ich denke, so etwas würde funktionieren:

<script type="text/javascript" src="/js/styles.js"></script>

Diese JS-Datei enthält die folgende Anweisung:

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

Die Adresse von Javascript und CSS muss absolut sein, wenn sie auf Ihre Site verweisen soll.

Viele CSS-Importtechniken werden in diesem "Sag nein zu CSS-Hacks mit Verzweigungstechniken" Artikel behandelt.

Der Artikel "Verwenden von JavaScript zum dynamischen Hinzufügen von Portlet-CSS-Stylesheets" erwähnt jedoch auch die CreateStyleSheet-Möglichkeit (proprietäre Methode für IE):

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
48
VonC

Rufen Sie die folgende Funktion auf, um eine CSS- oder JavaScript-Datei dynamisch zu laden.

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    // alert('called');
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    alert('called');
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  }
  if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

Übergeben Sie den vollständigen Dateipfad mit dem Namen filename als Argument.

15
Talha

Element.insertAdjacentHTML hat eine sehr gute Browserunterstützung und kann ein Stylesheet in einer Zeile hinzufügen.

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
8
dangowans

Ich weiß, das ist ein ziemlich alter Thread, aber hier kommen meine 5 Cent.

Es gibt einen anderen Weg, dies zu tun, abhängig von Ihren Bedürfnissen.

Ich habe einen Fall, in dem ich möchte, dass eine CSS-Datei nur eine Weile aktiv ist. Wie CSS-Switching. Aktivieren Sie das CSS und deaktivieren Sie es nach einem anderen Ereignis.

Anstatt die CSS dynamisch zu laden und dann zu entfernen, können Sie eine Klasse/eine ID vor allen Elementen in der neuen CSS hinzufügen und dann einfach die Klasse/ID des Basisknotens Ihrer CSS ändern (wie Body-Tag).

Sie würden mit dieser Lösung zunächst mehr CSS-Dateien laden, aber Sie haben eine dynamischere Möglichkeit, CSS-Layouts zu wechseln.

7
JohanSellberg

Wenn Sie wissen möchten (oder warten), bis der Stil selbst geladen wurde, funktioniert Folgendes:

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = function() { resolve(); console.log('style has loaded'); };
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};
7
sandstrom

In einem modernen Browser können Sie promise so verwenden. Erstellen Sie eine Loader-Funktion mit einem darin enthaltenen Versprechen:

function LoadCSS( cssURL ) {

    // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css

    return new Promise( function( resolve, reject ) {

        var link = document.createElement( 'link' );

        link.rel  = 'stylesheet';

        link.href = cssURL;

        document.head.appendChild( link );

        link.onload = function() { 

            resolve(); 

            console.log( 'CSS has loaded!' ); 
        };
    } );
}

Dann möchten Sie natürlich etwas tun, nachdem das CSS geladen wurde. Sie können die Funktion aufrufen, die ausgeführt werden muss, nachdem CSS wie folgt geladen wurde:

LoadCSS( 'css/styles.css' ).then( function() {

    console.log( 'Another function is triggered after CSS had been loaded.' );

    return DoAfterCSSHasLoaded();
} );

Nützliche Links, wenn Sie genau wissen möchten, wie es funktioniert:

Offizielle Dokumente zu Versprechungen

Nützlicher Leitfaden für Versprechen

Ein großartiges Intro-Video über Versprechen

4
Arthur Tarasov

Verwenden Sie diesen Code:

var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);
3
Gaurav Tripathi

Es gibt ein allgemeines JQuery-Plugin, das nach Bedarf CSS- und JS-Dateien synchronisiert und asych lädt. Außerdem wird verfolgt, was bereits geladen wurde :) Siehe: http://code.google.com/p/rloader/

3
ez2

Hier ist ein Weg mit der Elementerstellungsmethode von jQuery (meine Präferenz) und mit dem Rückruf onLoad:

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);
3
Lounge9

Die YUI-Bibliothek könnte das sein, wonach Sie suchen. Es unterstützt auch das domänenübergreifende Laden.

Wenn Sie jquery verwenden, macht dieses Plugin dasselbe.

2
anand.trex

Unten ein vollständiger Code, der zum Laden von JS und/oder CSS verwendet wird

function loadScript(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var done = false
  var extension = '.js'
  for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script")
    script.src = path        
    script.type = "text/javascript"
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true
            script.onload = script.onreadystatechange = null   // cleans up a little memory:
            head.removeChild(script)  // to avoid douple loading
        }
  };
  head.appendChild(script) 
  done = false
 }
}

function loadStyle(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var extension = '.css'
  for (var file of files){ 
   var path = directory + file + extension 
   var link = document.createElement("link")
   link.href = path        
   link.type = "text/css"
   link.rel = "stylesheet" 
   head.appendChild(link) 
 }
}

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();

(() => loadStyle('styles/', ['index'])) ();
1
Hasan A Yousef

Sie können für diese YUI-Bibliothek oder verwenden Sie diese Artikel zu implementieren

1
zihotki
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

Ich benutze Thymeleaf und das funktioniert einwandfrei. Vielen Dank

0
ekoindra0912