javascript - 如何使用 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 的 Angular 来看，您的方法是正确的。您尝试从另一个站点加载脚本，但由于内容安全策略 (CSP) 对此进行了限制，因此您不能。检查您的 CSP 元标记。

我建议您阅读更多相关信息 in this MDN article.

要简单地允许所有仅用于测试是否仍然出现错误，您可以使用此:

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

检查 this answer详细解释这个标签是如何工作的

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

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