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).
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)
}Appelez cette fonction javascript pour charger dynamiquement les fichiers css et js. Passez le chemin complet du fichier avec le nom dans l'argument 'filename'.
Dans un navigateur moderne, vous pouvez utiliser promise comme ceci. Créer une fonction loader avec une promesse dedans :
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!' );
};
} );
}Il est donc évident qu'il faut faire quelque chose après le chargement du CSS. Vous pouvez appeler la fonction qui doit être exécutée après le chargement du CSS comme ceci :
LoadCSS( 'css/styles.css' ).then( function() {
console.log( 'Another function is triggered after CSS had been loaded.' );
return DoAfterCSSHasLoaded();
} );Liens utiles pour comprendre en profondeur le fonctionnement du système :
Je sais que c'est un vieux sujet, mais voici mes 5 centimes.
Il existe une autre façon de procéder en fonction de vos besoins.
J'ai un cas où je veux qu'un fichier css ne soit actif que pendant un certain temps. Comme un changement de css. Il est possible d'activer le css et de le désactiver après un autre événement.
Au lieu de charger la css dynamiquement et de la supprimer ensuite, vous pouvez ajouter une classe/un identifiant devant tous les éléments de la nouvelle css, puis changer la classe/l'identifiant du nœud de base de votre css (comme la balise body).
Avec cette solution, vous aurez plus de fichiers css chargés au départ, mais vous disposerez d'une méthode plus dynamique pour changer de présentation css.
Avez-vous déjà entendu parler des promesses ? Elles fonctionnent sur tous les navigateurs modernes et sont relativement simples à utiliser. Jetez un coup d'œil à cette méthode simple pour injecter de la css dans l'en-tête html :
function loadStyle(src) {
return new Promise(function (resolve, reject) {
let link = document.createElement('link');
link.href = src;
link.rel = 'stylesheet';
link.onload = () => resolve(link);
link.onerror = () => reject(new Error(`Style load error for ${src}`));
document.head.append(link);
});
}Vous pouvez le mettre en œuvre comme suit :
window.onload = function () {
loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
.then(() => loadStyle("css/style.css"))
.then(() => loadStyle("css/icomoon.css"))
.then(() => {
alert('All styles are loaded!');
}).catch(err => alert(err));
}C'est vraiment cool, non ? C'est une façon de décider de la priorité des styles en utilisant des promesses.
Pour voir la mise en œuvre d'un chargement multi-styles, voir : https://stackoverflow.com/a/63936671/13720928
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/