Use respond.js in cross-domain environment

티스토리에서 Respond.js 사용하기

  Respond.js is very important because It allows you to use responsive page in older version of IEs. However, sometimes It can't be used because of the cross-domain problem like Tistory service. It always import css files from Daum's CDN, so your blog's domain and your css or javascipt's domain are not matched. I solve the problem today. You can use respond.js in cross-domain environment. Only to do is uploading the 'respond-proxy.html' in the same directory of your css.

  First, you should download respond.js and read the document. It'll help you understand how it works. (Especially cross-domain part).

https://github.com/scottjehl/Respond/tree/master/cross-domain

  And here is the code you can use:

	
<script>!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);</script>
<link href="./images/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link src="https://t1.daumcdn.net/cfile/tistory/264AF84256EB0FF102" id="respond-redirect" rel="respond-redirect" />
<script>(function(e,t,n){function f(t){return e.encodeURIComponent(t)}function l(n,o){function l(){var t;try{t=u.contentWindow.name}catch(n){}if(t){u.src="about:blank";u.parentNode.removeChild(u);u=null;if(a){a=null;if(e.CollectGarbage){e.CollectGarbage()}}o(t)}else{e.setTimeout(l,100)}}var u,a;if("ActiveXObject"in e){a=new ActiveXObject("htmlfile");a.open();a.write('<iframe id="x"></iframe>');a.close();u=a.getElementById("x")}else{u=t.createElement("iframe");u.style.cssText="position:absolute;top:-99em";r.insertBefore(u,r.firstElementChild||r.firstChild)}u.src=c(i)+"?url="+f(s)+"&css="+f(c(n));e.setTimeout(l,500)}function c(e){var t=document.createElement("div"),n=e.split("&").join("&").split("<").join("<").split('"').join(""");t.innerHTML='<a href="'+n+'">x</a>';return t.firstChild.href}function h(){if(~!s.indexOf(location.host)){var e=t.createElement("div");e.innerHTML='<a href="'+s+'"></a>';r.insertBefore(e,r.firstElementChild||r.firstChild);s=e.firstChild.href;e.parentNode.removeChild(e);e=null}}function p(){var e=t.getElementsByTagName("link");for(var n=0,r=e.length;n<r;n++){var i=e[n],s=e[n].href,u=/^([a-zA-Z:]*\/\/(www\.)?)/.test(s),a=o&&!u||u;if(i.rel.indexOf("stylesheet")>=0&&a){(function(e){l(s,function(t){e.styleSheet.rawCssText=t;respond.update()})})(i)}}}var r=t.documentElement,i=t.getElementById("respond-proxy").href,s=(t.getElementById("respond-redirect")||location).href,o=t.getElementsByTagName("base")[0],u=[],a;if(!respond.mediaQueriesSupported){h();p()}})(window,document)</script> 
	

Here is what to do with this code.

1. Wrap the code with <!--[if lt IE 9]> and <![endif]-->. (IE hack)

2. Upload the respond-proxy.html in your css domain. Note that ./images/respond-proxy.html will not be in your domain. If you are the visitor, you will see "http://ts.daumcdn.net/custom/blog/162/1620714/skin/images/respond-proxy.html" instead of "./images/respond-proxy.html"

3. So It will always work despite of the environment can't be uploaded the any file of respond.js except the respond-proxy.html in other domain.

  나중에 FastBoot스킨에 IE8지원을 스펙으로 넣으면서 한번 더 소개해드리겠습니다만 respond.js가 티스토리에서는 적용이 안됩니다. 왜냐면 Cross-domain문제가 생기기 때문인데요. 크로스도메인 문제를 해결하는 법이 Git-Hub에 올라와 있기는 합니다만 이또한 기본적으로 티스토리에서 스킨으로 업로드하는 파일은 Daum CDN서버를 통해서만 접근이 되고 실제 티스토리 도메인으로는 접근이 안되는 문제가 있습니다. 이를 해결하려면 모든 파일을 skin.html에 합쳐야 합니다. 위 소스가 그 코드이구요. 관심있으신 분들은 읽어보시고 적용을 해 보세요. 반응형스킨에서 IE8이 지원되는 것은 본 블로그나

http://fastboot.tistory.com/

에서 확인하실 수 있습니다.