Accessing cross-domain style sheet with .cssRules

by

The only real solution to this problem is to CORS load your CSS in the first place. By using a CORS XMLHttpRequest to load the CSS from an external domain, and then injecting the responseText (actually responseCSS in this case) into the page via something like:

function loadCSSCors(stylesheet_uri) {
  var _xhr = global.XMLHttpRequest;
  var has_cred = false;
  try {has_cred = _xhr && ('withCredentials' in (new _xhr()));} catch(e) {}
  if (!has_cred) {
    console.error('CORS not supported');
    return;
  }
  var xhr = new _xhr();
  xhr.open('GET', stylesheet_uri);
  xhr.onload = function() {
    xhr.onload = xhr.onerror = null;
    if (xhr.status < 200 || xhr.status >= 300) {
      console.error('style failed to load: ' + stylesheet_uri);
    } else {
      var style_tag = document.createElement('style');
      style_tag.appendChild(document.createTextNode(xhr.responseText));
      document.head.appendChild(style_tag);
    }
  };
  xhr.onerror = function() {
      xhr.onload = xhr.onerror = null;
      console.error('XHR CORS CSS fail:' + styleURI);
  };
  xhr.send();
}

This way the CSS files will be interpreted by the browser as coming from the same origin domain as the main page response and now you will have access to the cssRules properties of your stylesheets.

More Related Contents:

  1. IE9 jQuery AJAX with CORS returns “Access is denied”
  2. Jquery $.ajax fails in IE on cross domain calls
  3. AJAX in Chrome sending OPTIONS instead of GET/POST/PUT/DELETE?
  4. XMLHttpRequest cannot load an URL with jQuery
  5. jQuery cross domain iframe scripting
  6. from jquery $.ajax to angular $http
  7. jQuery getJSON works locally, but not cross domain
  8. Set Headers with jQuery.ajax and JSONP?
  9. Ajax Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
  10. No response from MediaWiki API using jQuery
  11. JSON: How do I make cross-domain JSON call
  12. jQuery ajax request being block because Cross-Origin
  13. Accessing web Service from jQuery – cross domain
  14. how to avoid cross domain policy in jquery ajax for consuming wcf service?
  15. Preventing “SCRIPT5: Access is denied” error in IE
  16. Basic how-to for cross domain jsonp
  17. How to make synchronous JSONP crossdomain call
  18. anchor click doesn’t open the modal
  19. Why is gridview:true used for and what does it mean?
  20. Read/write to file using jQuery
  21. how to change a selections options based on another select option selected?
  22. Ajax request with JQuery on page unload
  23. ‘No Transport’ Error w/ jQuery ajax call in IE
  24. How can I use jQuery.load to replace a div including the div
  25. Removing file from multiple files uploader on button click when using HTML5 file input
  26. jQuery: how to replace .live with .on? [duplicate]
  27. Implementing jQuery DatePicker in Bootstrap modal
  28. handle ajax error when a user clicks refresh
  29. how to push a message from web server to browser using node js
  30. jQuery multiple input name[] validation

Leave a Comment