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 la méthode "à l'ancienne", qui, je l'espère, fonctionne avec tous les navigateurs. En théorie, vous devriez utiliser setAttribute Malheureusement, IE6 ne le prend pas en charge de manière cohérente.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.example/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}Cet exemple vérifie si le CSS a déjà été ajouté, de sorte qu'il ne l'ajoute qu'une seule fois.
Placez ce code dans un fichier JavaScript, demandez à l'utilisateur final d'inclure simplement le JavaScript et assurez-vous que le chemin CSS est absolu afin qu'il soit chargé à partir de vos serveurs.
Voici un exemple qui utilise un simple JavaScript pour injecter un lien CSS dans la page head sur la base du nom de fichier de l'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>Insérer le code juste avant la fermeture head et le CSS sera chargé avant le rendu de la page. L'utilisation d'un code JavaScript externe ( .js ) provoquera un Flash de contenu non stylé ( FOUC ) pour apparaître.
Je suppose que quelque chose comme script ferait l'affaire :
<script type="text/javascript" src="/js/styles.js"></script>Ce fichier JS contient la déclaration suivante :
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="http://stackoverflow.com/css/versions4.css">');L'adresse du javascript et du css doit être absolue si l'on veut qu'ils renvoient à votre site.
De nombreuses techniques d'importation de feuilles de calcul CSS sont abordées dans le présent document. "Dites non aux techniques de branchement CSS". article.
Mais le "Utilisation de JavaScript pour ajouter dynamiquement des feuilles de style CSS aux portlets" mentionne également la possibilité de CreateStyleSheet (méthode propriétaire pour 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);
}
//]]>
Voici ce que j'ai trouvé à ajouter document.createStyleSheet() aux navigateurs qui ne l'ont pas : stackoverflow.com/questions/524696/
Je ne sais pas exactement dans quel cas, mais dans certains cas, document.write n'est pas recommandé car il écrase tout le corps de votre site web.
@VonC, Existe-t-il une fonction permettant d'obtenir directement le <style> au lieu de supposer qu'il s'agit du premier enfant de l'élément <head> via ("head")[0] ?
Element.insertAdjacentHTML supporte très bien les navigateurs et peut ajouter une feuille de style en une seule ligne.
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
Si vous voulez savoir (ou attendre) que le style lui-même soit chargé, cela fonctionne :
// 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 = () => resolve();
link.onerror = () => reject();
link.href = url;
let headScript = document.querySelector('script');
headScript.parentNode.insertBefore(link, headScript);
});
};Utilisation :
fetchStyle(url)
.then(
() => console.log("style loaded succesfully"),
() => console.error("style could not be loaded"),
); 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/