Skip to content
This repository

This adds support for a cross-domain request to fetch the CSS files #46

Closed
wants to merge 2 commits into from

4 participants

wklancnik Scott Jehl Richard Herrera Jeff Lembeck
wklancnik

This allows for a CDN hosted CSS file on a separate domain to work with respond.js for browsers that support it (e.g. IE8). It naturally falls back to an HXR onerror.

Effectively, this adds support for CDNs in IE8, without having to use an iframe.

Scott Jehl
Owner

Interesting, thanks I'll take a look. Can you update this to latest on master, btw? Thanks.

Richard Herrera
Collaborator

Note that XDomainRequest requires you set an Access-Control-Allow-Origin response header on the remote file.

I considered implementing this in my patch (#28) but ultimately decided to limit the amount of setup and just use the iframe proxy. However, this is a great solution if you decide to deprecate IE6 & 7.

Scott Jehl
Owner

Mind submitting this one as a separate pull? Then I can grab it real quick. thanks!

Scott Jehl
Owner

Hmm. Looks good. Think we could combine this into the existing x-domain plugin (externally)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 54 additions and 19 deletions. Show diff stats Hide diff stats

  1. +54 19 respond.src.js
73 respond.src.js
@@ -23,6 +23,7 @@
23 23 head = doc.getElementsByTagName( "head" )[0] || docElem,
24 24 links = head.getElementsByTagName( "link" ),
25 25 requestQueue = [],
  26 + isXDomainRequest = win.XDomainRequest,
26 27
27 28 //loop stylesheets, send text content to translate
28 29 ripCSS = function(){
@@ -52,6 +53,14 @@
52 53 media: media
53 54 } );
54 55 }
  56 + else if (isXDomainRequest){
  57 + // browser can handle cross-domain CSS lookups
  58 + requestQueue.push({
  59 + href: href,
  60 + media: media,
  61 + isXDomainRequest: true
  62 + });
  63 + }
55 64 else{
56 65 parsedSheets[ href ] = true;
57 66 }
@@ -71,7 +80,7 @@
71 80 translate( styles, thisRequest.href, thisRequest.media );
72 81 parsedSheets[ thisRequest.href ] = true;
73 82 makeRequests();
74   - } );
  83 + }, thisRequest.isXDomainRequest );
75 84 }
76 85 },
77 86
@@ -132,7 +141,7 @@
132 141
133 142 applyMedia();
134 143 },
135   -
  144 +
136 145 lastCall,
137 146
138 147 resizeDefer,
@@ -185,12 +194,12 @@
185 194 ss.media = i;
186 195
187 196 if ( ss.styleSheet ){
188   - ss.styleSheet.cssText = css;
189   - }
190   - else {
  197 + ss.styleSheet.cssText = css;
  198 + }
  199 + else {
191 200 ss.appendChild( doc.createTextNode( css ) );
192   - }
193   - dFrag.appendChild( ss );
  201 + }
  202 + dFrag.appendChild( ss );
194 203 appendedEls.push( ss );
195 204 }
196 205
@@ -198,22 +207,48 @@
198 207 head.insertBefore( dFrag, lastLink.nextSibling );
199 208 },
200 209 //tweaked Ajax functions from Quirksmode
201   - ajax = function( url, callback ) {
202   - var req = xmlHttp();
203   - if (!req){
204   - return;
205   - }
206   - req.open( "GET", url, true );
207   - req.onreadystatechange = function () {
208   - if ( req.readyState != 4 || req.status != 200 && req.status != 304 ){
  210 + ajax = function( url, callback, isxd ) {
  211 +
  212 + var xhr = function() {
  213 + var req = xmlHttp();
  214 +
  215 + if (!req){
209 216 return;
  217 + }
  218 + req.open( "GET", url, true );
  219 + req.onreadystatechange = function () {
  220 + if ( req.readyState != 4 || req.status != 200 && req.status != 304 ){
  221 + return;
  222 + }
  223 + callback( req.responseText );
210 224 }
211   - callback( req.responseText );
  225 + if ( req.readyState == 4 ){
  226 + return;
  227 + }
  228 + req.send( null );
  229 +
  230 + };
  231 +
  232 + if (!!isxd)
  233 + {
  234 + // This is an XDomainRequest in IE 8--time to get weird...
  235 + var xdr = new XDomainRequest();
  236 +
  237 + if (!xdr){
  238 + xhr();
  239 + return;
  240 + }
  241 + xdr.open("GET", url);
  242 + xdr.onerror = xhr;
  243 + xdr.onload = function () {
  244 + callback(xdr.responseText);
  245 + };
  246 + xdr.send();
212 247 }
213   - if ( req.readyState == 4 ){
214   - return;
  248 + else{
  249 + xhr();
215 250 }
216   - req.send( null );
  251 +
217 252 },
218 253 //define ajax obj
219 254 xmlHttp = (function() {

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.