javascript - 使用 JavaScript 获取现有网站的 CSS

Question

我正在尝试创建一个小书签来读取网站的 CSS 媒体查询并根据结果添加 CSS 规则。但我通常甚至无法访问页面的 CSS 文件。到目前为止，这是我尝试过的方法(这是假定存在 JQuery 的所有页内 JS 代码):

var styleSheet = document.styleSheets.item(0);
var rules = styleSheet.cssRules;

这失败了

Exception: The operation is insecure.

我使用的是 Firefox，我认为这种方法通常适用于其他浏览器，但我需要这种方法才能跨浏览器使用。我无法在服务器上启用 JSONP 或 CORS，因为我无权访问服务器。所以我采取了不同的策略。

$.ajax({
  url: styleSheet.href,
  type: "GET",
  success: function(data, textStatus, jqXHR) {
    console.log('data: '+data+", textStatus: "+textStatus+"\nObject: "+data);
  },
  error: function(jqXHR, textStatus, error) {
    console.error("Failed. jqXHR: "+JSON.stringify(jqXHR)+"\ntextStatus:"+textStatus+"\nerror: "+error);
  }
});

这每次都会返回 200，但工作频率很低，并且没有告诉我失败原因:

Failed. jqXHR: {"readyState":0,"responseText":"","status":0,"statusText":"error"}

textStatus: error

error:

(我也尝试了一个普通的 $.get，但希望上面的内容能告诉我失败的原因)。如果您知道如何从请求中获取更多信息，请告诉我。

因为我正在寻找媒体查询，所以我需要访问 CSS 文件，不能只查看元素的计算 CSS。

我不是要更改 CSS 文件，只是将新 CSS 应用于元素，所以我不明白为什么它应该被认为是不安全的。

最后，我可以在样式编辑器中或通过导航到我从 styleSheet.href 获得的 URL 清楚地看到页面的 CSS，这意味着它应该可以通过编程方式访问。如果可能的话，一个也适用于 https 页面的解决方案会很棒。

Answer 1

我相信(至少在 FF 中)您不能使用非特权 Javascsript(如在小书签中)跨域读取样式表。它与 AJAX 的限制相同。没有“直接”的解决方案。您必须通过使用代理或使用特权 javascript(例如在插件或用户脚本中)来解决它。

这是我使用过的接受限制的相关代码片段。

function getStyle() {
  var r = [];
  for ( var i=0; i < d.styleSheets.length; i++ ) {
    try { // trying to read cross domain sheets can throw error
      var classes = d.styleSheets[i].rules || d.styleSheets[i].cssRules;
      for ( var x=0; x < classes.length; x++ ) r.push(classes[x].cssText || classes[x].style.cssText);
    } catch(e){}
  }
  return r;
}