Comment charger et le fichier css externe du CDN avec Javascript?

Question

brièvement, je veux charger le fichier bootstrap css sur un web page sur Internet (pas sur mon site Web), pour faire une certaine personnalisation à l'aide de Javascript dans la console du navigateur.

J'ai essayé de charger bootstrap du CDN en utilisant jQuery comme ceci:

$("head").append("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' type='text/css' />"); 

Quand vous faites que je reçois ce message d'erreur:

Que dois-je faire pour le charger avec succès à la page?

Answer 1

Ici, vous allez:

var mySheet = document.createElement('link');mySheet.type='text/css';mySheet.rel='stylesheet';mySheet.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';document.getElementsByTagName('head')[0].appendChild(mySheet); 

Coller code ci-dessus dans DevTools -> console, appuyez sur Entrée et vous êtes bon pour aller.

Le point principal est ici pour créer balise HTML dans un premier temps, le remplir avec des propriétés et l'ajouter à

Answer 2

de DOM Cela a fonctionné pour moi:

var head = document.head; 
var link = document.createElement('link'); 



link.type = 'text/css'; 


link.rel = 'stylesheet'; 


link.href = fileName/url; 



head.appendChild(link); 

Answer 3

du point de vue js votre approche est juste . Vous avez essayé de charger un script à partir d'un autre site et, comme vous l'avez limité par la stratégie de sécurité du contenu (CSP), vous ne pouvez pas le faire. Vérifiez votre métabalise CSP.

Je vous suggère de lire davantage in this MDN article.

simplement permettre à tous juste pour le test en cas d'erreur apparaît toujours, vous pouvez utiliser ceci:

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'"> 

Vérifiez this answer avec une explication détaillée de la façon dont cette balise fonctionne

BTW, cela fonctionne pour moi:

function loadCss(filename) { 
 
    var cssNode = document.createElement("link"); 
 
    cssNode.setAttribute("rel", "stylesheet"); 
 
    cssNode.setAttribute("type", "text/css"); 
 
    cssNode.setAttribute("href", filename); 
 
    document.getElementsByTagName("head")[0].appendChild(cssNode); 
 
} 
 

 
loadCss("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css")