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

【问题标题】：How to load and external css file from the CDN with Javascript?如何使用 Javascript 从 CDN 加载和外部 css 文件？
【发布时间】：2017-08-31 23:04:35
【问题描述】：

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

我尝试使用 jQuery 从 CDN 加载引导程序，如下所示：

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

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

我应该怎么做才能成功加载到页面？

【问题讨论】：

检查stackoverflow.com/questions/27323631/…

标签： javascript jquery twitter-bootstrap cross-domain xss

【解决方案1】：

从 js 的角度来看，您的方法是正确的。您尝试从另一个站点加载脚本，因为您已通过内容安全策略 (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")

【讨论】：

【解决方案2】：

这对我有用：

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



link.type = 'text/css';


link.rel = 'stylesheet';


link.href = fileName/url;



head.appendChild(link);

【讨论】：

【解决方案3】：

给你：

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 -> 控制台，按 Enter 即可。

这里的重点是首先创建HTML标签，用属性填充它并添加到DOM中

【讨论】：