Use respond.js in cross-domain environment

Posted by Readiz
2014.03.02 16:44 반응형 티스토리/Tistory



티스토리에서 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).



  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 "https://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이 지원되는 것은 본 블로그나



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


이 댓글을 비밀 댓글로
  1. 현재 ie8 반응형 작동하나요?
    검색해서 우연히 http://www.tistory.com/forum/viewtopic.php?pid=14932 글을 찾긴 했는데, 설명하신 방법대로 해봤는데 IE8에서 오류가 발생하고 반응형으로 작동하질 않습니다. 배포하시는 최근 스킨도 이 방법을 적용하진 않으신거 같던데... 궁금합니다.!
    • 설명한 방법대로 해도 되긴 됐었습니다만 문제가
      1. 속도
      2. 화면 로딩 후(기본 모바일로 로딩) respond.js 로딩 되었을 때 화면이 제자리로 감

      이 두 문제 때문에 포기를 했었구요,
      이 두 문제는 cross-domain 환경에서는 어찌할 수 없나보더군요. 속도가 일반적으로 respond.js 쓰는 것보다 느립니다.
      또 특정 환경에서는 스크립트 오류를 내기도 했었구요.
      아무튼 이 방법은 해외에서도 cross-domain에서 쓰라고 권장되고 있는 방법인데 완전치는 않은 방법인 것 같습니다.