How to load and external css file from the CDN with Javascript?

Question

briefly, I want to load the bootstrap css file on a web page on the internet (not on my website), to do some customization on it using Javascript in the browser console.

I tried to load bootstrap from the CDN using jQuery like this:

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

When doing that I get this error message:

What should I do to load it successfully to the page ?

Answer 1

From js standpoint your approach is right. You tried to load a script from another site and, because you've restricted this by Content Security Policy (CSP), you can't. Check your CSP metatag.

I suggest you to read more about it in this MDN article.

To simply allow all just for test if error still appears, you can use this:

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

Check this answer with detail explanation of how this tag works

BTW, this works for me:

 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")

Answer 2

Here you go:

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);

Paste above code in DevTools -> console, hit Enter and you're good to go.

The main point here is to create HTML tag at first, fill it up with properties and add it to the DOM's

Answer 3

This worked for me:

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



link.type = 'text/css';


link.rel = 'stylesheet';


link.href = fileName/url;



head.appendChild(link);