如何使用Javascript从CDN加载外部css文件？

Question

简单地说，我想在互联网上的web page（而不是我的网站）上加载bootstrap css文件，在浏览器控制台中使用Javascript对其进行一些自定义。

我尝试使用jQuery从CDN加载bootstrap：

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

执行此操作时，我收到以下错误消息：

如何将其成功加载到页面？

Answer 1

从js的角度来看，你的方法是正确的。您尝试从其他网站加载脚本，并且由于您已通过内容安全策略（CSP）对此进行了限制，因此您无法做到这一点。检查您的CSP元标记。

我建议您详细了解in this MDN article.

要简单地允许所有仅用于测试，如果错误仍然显示，您可以使用此功能：

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

检查this answer，详细说明此标记的工作原理

顺便说一句，这对我有用：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你走了：

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

在DevTools中粘贴上面的代码 - ＆gt;控制台，按Enter键，你就可以了。

这里的要点是首先创建HTML标记，用属性填充它并将其添加到DOM

Answer 3

这对我有用：

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



link.type = 'text/css';


link.rel = 'stylesheet';


link.href = fileName/url;



head.appendChild(link);