使用JavaScript从外部文件中读取CSS？

Question

我希望能够在内部工具的页面上加载的所有CSS文件上运行正则表达式。这允许我lint CSS文件并检查任何冲突的声明。

通过迭代document.stylesheets并获取cssRules的值，这适用于本地文件。

但是，对于从Typekit等外部网站加载的CSS，Google字体等会为null返回cssRules（参见图片）。

我尝试使用JSONP来获取文件，但它返回一个无效的令牌，因为它可能是期待JSON并且正在响应CSS。有没有办法解决这个问题呢？

为了完整性，这是我试过的JSONP测试：

$.ajax({
    type: 'GET',
    url: "path/to/file.css",
    jsonp: "callback",
    dataType: "jsonp",
    success: function(response) {
        var test = JSON.stringify(response);
        console.log(test);
    }
});

是否可以将这些样式表中的CSS作为一个字符串，我可以通过我的正则表达式？

Answer 1

尝试使用完整的css链接，只需使用url属性为ajax。

演示：jsFiddle

$.ajax({
    url:"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap-theme.min.css"
})
.done(function(result){
    $('.style').html(result);
});

.style {
  max-width: 300px;
  max-height: 300px;
  overflow:auto;

<div class="style"></div>