Question

我正在尝试创建一个书签，它可以读取网站的CSS媒体查询，并根据结果添加CSS规则。但我通常甚至无法访问页面的CSS文件。这是我到目前为止所尝试的内容（这是假设存在JQuery的所有页内JS代码）：

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

失败

例外：操作不安全。

我正在使用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，但很少发生，并且没有告诉我它失败的原因：

失败。 jqXHR：{“readyState”：0，“responseText”：“”，“status”：0，“statusText”：“error”}

textStatus：错误

错误：

（我也试过一个简单的$.get，但希望上面会告诉我它失败的原因）。如果您知道如何从请求中获取更多信息，请告诉我们。

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

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

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

Answer 1

我相信（至少在FF中）你无法使用无特权的Javascsript（如bookmarklet）读取styleSheets跨域。它与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;
}

Answer 2

由于浏览器安全策略，操作不安全。除非在请求的页面上启用Same Origin Policy，否则浏览器会将您限制为Cross Origin Resource Sharing。这意味着您无法从其他网页（即样式表）请求资源，除非明确允许您这样做。

您可以将书签作为浏览器扩展程序来解决此问题，该扩展程序不限于同源策略。例如，Chrome扩展程序可以生成Cross Origin XMLHttpRequests（http://developer.chrome.com/extensions/xhr.html）。

使用JavaScript获取现有网站的CSS

2 个答案: