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).
Cette fonction fait appel à la mémorisation. Elle pourrait être appelée de nombreuses fois sans qu'il y ait de conflit entre le chargement et l'exécution de la même feuille de style deux fois. De plus, elle ne se résout pas avant que la feuille de style ne soit chargée.
const loadStyle = function () {
let cache = {};
return function (src) {
return cache[src] || (cache[src] = new Promise((resolve, reject) => {
let s = document.createElement('link');
s.rel = 'stylesheet';
s.href = src;
s.onload = resolve;
s.onerror = reject;
document.head.append(s);
}));
}
}();Remarquez les parenthèses () après l'expression de la fonction.
Chargement parallèle des feuilles de style :
Promise.all([
loadStyle('/style1.css'),
loadStyle('/style2.css'),
// ...
]).then(() => {
// do something
})Vous pouvez utiliser la même méthode pour chargement dynamique scripts .
Vous pouvez utiliser pour cela Bibliothèque YUI ou utiliser ce article à mettre en œuvre
En Bibliothèque YUI pourrait être ce que vous recherchez. Il prend également en charge le chargement interdomaines.
Si vous utilisez jquery, ce plugin fait la même chose.
J'aimerais partager avec vous une autre façon de charger non seulement la css mais aussi tous les actifs (js, css, images) et de gérer onload pour le groupe de fichiers. C'est async-assets-loader . Voir l'exemple ci-dessous :
<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
{uri: jsfile, type: "script"},
{uri: cssfile, type: "style"},
{uri: imgfile, type: "img"}
], function () {
console.log("Assets are loaded");
console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
});
</script> Selon la async-assets-loader documents
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/