Est-il possible d'importer des feuilles de style css dans une page html en utilisant Javascript ? Si oui, comment faire ?
P.S. Le javascript sera hébergé sur mon site, mais je veux que les utilisateurs puissent entrer le code <head> de leur site web, et il devrait pouvoir importer un fichier css hébergé sur mon serveur dans la page web actuelle. (le fichier css et le fichier javascript seront tous deux hébergés sur mon serveur).
Voici une une ligne qui utilise un simple JavaScript pour injecter un lien CSS dans l'élément head sur la base de la partie "nom de fichier" de l'URL :
document.head.innerHTML += '<link rel="stylesheet" href="css/style.css">';
La plupart des navigateurs le prennent en charge. Voir la page compatibilité avec les navigateurs .
Réponse du futur. En 2022, nous disposons d'une api d'assertions d'importation pour l'importation de fichiers css.
import mycss from "./style/mycss.css" assert { type: "css" };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];Support des navigateurs : Jusqu'en septembre 2022, seuls les navigateurs basés sur chrome sont pris en charge.
Plus d'informations ici : v8 import assertions post
tc39 github t39 proposition d'assertions d'importation
Il existe un plugin jquery général qui charge les fichiers css et JS de manière synchrone et asych à la demande. Il garde aussi une trace de ce qui a déjà été chargé :) voir : http://code.google.com/p/rloader/
Voici une méthode avec la méthode de création d'éléments de jQuery (ma préférence) et avec le callback 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);
Ci-dessous un code complet pour le chargement de JS et/ou CSS
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'])) (); Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Il y a aussi une question sur jQuery stackoverflow.com/questions/2685614/