Wie laden Sie CSS-Dateien mit Javascript?


230

Ist es möglich CSS-Stylesheets mit JavaScript in eine HTML-Seite zu importieren? Wenn ja, wie kann es gemacht werden?

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

  0

Es wird auch die Frage über jQuery http://stackoverflow.com/questions/2685614/load-external-css-file-like -scripts-in-jquery-was-ist-kompatibel-in-ie-auch 27 aug. 122012-08-27 10:10:19

319

Hier ist die "Old School" Art, es zu tun, die hoffentlich über alle Browser funktioniert. In der Theorie würden Sie setAttribute verwenden, leider IE6 unterstützt es nicht konsequent.

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

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

VanillaJS

Hier ist ein Beispiel, das schlicht JavaScript verwendet einen CSS-Link in das head Element zu injizieren, basierend auf dem Dateinamen Teil der URL:

<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> 

Sie den Code ein kurz vor dem Schließen head tag und das CSS wird geladen, bevor die Seite gerendert wird. Wenn Sie eine externe JavaScript-Datei (.js) verwenden, wird ein Flash mit unsterblichen Inhalten (FOUC) angezeigt.

+5

Wie wäre es mit einem Rückruf, sobald die CSS-Datei geladen wurde? 19 jun. 122012-06-19 03:59:14

+1

Dies ist ziemlich komplex, um zuverlässig zu tun. Die beliebten Javascript-Bibliotheken haben jetzt normalerweise eine Form des Ladens von Javascript und Stylesheets mit einem Callback. Ein Beispiel finden Sie unter [YUI Get] (http://yuilibrary.com/yui/docs/get/). 05 aug. 122012-08-05 12:42:16

  0

Siehe [Ext.util.CSS.swapStyleSheet] (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.CSS-Methode-swapStyleSheet) für Ext JS-Bibliothek 12 feb. 132013-02-12 08:50:32

+9

vielleicht wäre es besser, ein anderes Zeichen als $ für die Dokumentverknüpfung zu verwenden, da es jQuery leicht stören kann (wie in meinem Fall);) 04 sep. 132013-09-04 07:44:20

+2

@ zathrus-writer Try jQuery.noConflic(); http://api.jquery.com/jQuery.noConflict/ 21 nov. 132013-11-21 06:20:37

+1

@jonnybojangles Wenn Sie jQuery.noConflict verwenden, müssen Sie alle Ihre Referenzen auf jQuery als $ umbenennen. Es wäre viel einfacher, nur einen anderen Variablennamen für den CSS-Loader zu verwenden. 04 jun. 142014-06-04 15:59:09

  0

@jchook Ich konnte einen Callback anhängen, indem ich 'link.onload = function() {...}' vor dem Anfügen hinzufüge 22 okt. 142014-10-22 18:10:25

  0

Ich habe diesen Code ausprobiert, aber nicht richtig funktioniert 15 aug. 152015-08-15 06:57:51

  0

Großartig. Es funktioniert in Chrom! 08 dez. 152015-12-08 05:29:08

  0

Leider funktioniert das nicht mehr. 23 apr. 172017-04-23 15:09:06

  0

[Wie man mit jQuery lädt] (https://Stackoverflow.com/a/2685661/4632019) 26 feb. 182018-02-26 11:10:09


45

Ich denke, so etwas wie dieses Skript tun würde:

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

Diese Datei JS enthält die folgende Anweisung:

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

Die Adresse des JavaScript und CSS müßte absolut sein, wenn sie um auf Ihre Website zu verweisen.

Viele CSS-Importtechniken werden in diesem Artikel "Say no to CSS hacks with branching techniques" Artikel diskutiert.

Aber der "Using JavaScript to dynamically add Portlet CSS stylesheets" Artikel erwähnt auch die create 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); 
} 
//]]> 
  0

hier ist, was ich gefunden habe, um 'document.createStyleSheet()' zu Browsern hinzuzufügen, die es nicht haben: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript/524798 # 524798 22 feb. 092009-02-22 22:16:03

  0

Vielen Dank für dieses Feedback 22 feb. 092009-02-22 22:51:46

+1

Nicht genau, in welchem ​​Fall, aber in einigen Fällen, 'document.write' isn ' t empfohlen, weil es vorbei ist schreibt den gesamten Körper Ihrer Website. 12 aug. 132013-08-12 11:18:45

  0

@VonC, Gibt es eine Funktion, um das '<style>' Element direkt zu erhalten anstatt anzunehmen, dass es das erste Kind von' <head> 'via' ("head") [0] 'ist? 30 apr. 142014-04-30 18:32:33

  0

@Pacerier Ich glaube, Sie finden das unter https://groups.google.com/forum/#!topic/prototype-scriptaculous/Bs_JYNpoC-k. Das wäre zum Beispiel: 'var style = document.getElementsByTagName (" style ") [0];' 30 apr. 142014-04-30 19:53:57

  0

document.write (url) funktionierte für mich !! 13 jul. 152015-07-13 10:24:30


1

Sie für diesen YUI library verwenden oder verwenden Sie diesen article to implement


2

Die YUI library sein könnte, was Sie suchen . Es unterstützt auch Cross-Domain-Laden. Wenn Sie jquery verwenden, macht this plugin das gleiche.


3

Es gibt ein allgemeines jquery plugin, das css- und JS-Dateien synch und asych on demand lädt. Es hält auch aus verfolgen, was bereits geladen worden ist :) siehe: http://code.google.com/p/rloader/


7

Ich weiß, das ein ziemlich alter Thread ist aber hier kommt meinen 5 Cent.

Es gibt einen anderen Weg, dies je nach Ihren Bedürfnissen zu tun.

Ich habe einen Fall, wo ich möchte, dass eine CSS-Datei nur eine Weile aktiv ist. Wie CSS-Switching. Aktiviere die CSS und deaktiviere sie nach einem anderen Ereignis.

Anstatt die CSS dynamisch zu laden und sie 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 (wie Body-Tag) wechseln).

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


13

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) 
} 

Führen Sie den vollständigen Dateipfad mit dem Namen als filename Argument.


0
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 ist gut funktionieren. Dank


3

Hier ist ein Weg, um mit jQuery Elemente Erstellungsmethode (meine Vorliebe) und mit 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); 

42

Wenn Sie jquery verwenden:

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

1

Unterhalb einem vollständigen Code für das Laden JS und/oder CSS


5

Wenn Sie wissen wollen (oder warten), bis der Stil itse lf geladen dies funktioniert:

// 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); 
    }); 
}; 
  0

Wie benutze ich das 21 jul. 172017-07-21 08:27:43


1

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);