Wie laden Sie CSS-Dateien mit Javascript?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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/

Answer 6

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.

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

Wenn Sie jquery verwenden:

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

Answer 11

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

Answer 12

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

Answer 13

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