Permalink
Browse files

Adding test for IE9 in iframes

Internet Explorer 9 supports css3 media queries, but not within frames
(this appears to be a bug in IE9). Modifying this script to check for
IE9 and check if within iframe and run if true.
  • Loading branch information...
1 parent b21c578 commit 1c86c66075f0a2099451eb426702fc3540d2e603 @drywall drywall committed May 16, 2012
Showing with 11 additions and 3 deletions.
  1. +1 −1 README.md
  2. +1 −1 respond.min.js
  3. +9 −1 respond.src.js
View
@@ -4,7 +4,7 @@
- Copyright 2011: Scott Jehl, scottjehl.com
- Dual licensed under the MIT or GPL Version 2 licenses.
-The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable [responsive web designs](http://www.alistapart.com/articles/responsive-web-design/) in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
+The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable [responsive web designs](http://www.alistapart.com/articles/responsive-web-design/) in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under (and IE9 when inside a frame). It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up [here](http://www.alistapart.com/articles/responsive-web-design/) and also [here](http://filamentgroup.com/examples/responsive-images/)
View
@@ -3,4 +3,4 @@
window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.style.background="none";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);
/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
-(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B<y;B++){A=D[B],z=A.href,C=A.media,x=A.rel&&A.rel.toLowerCase()==="stylesheet";if(!!z&&x&&!o[z]){if(A.styleSheet&&A.styleSheet.rawCssText){m(A.styleSheet.rawCssText,z,C);o[z]=true}else{if((!/^([a-zA-Z:]*\/\/)/.test(z)&&!g)||z.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:z,media:C})}}}}u()},u=function(){if(d.length){var x=d.shift();n(x.href,function(y){m(y,x.href,x.media);o[x.href]=true;u()})}},m=function(I,x,z){var G=I.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),J=G&&G.length||0,x=x.substring(0,x.lastIndexOf("/")),y=function(K){return K.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+x+"$2$3")},A=!J&&z,D=0,C,E,F,B,H;if(x.length){x+="/"}if(A){J=1}for(;D<J;D++){C=0;if(A){E=z;k.push(y(I))}else{E=G[D].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&y(RegExp.$2))}B=E.split(",");H=B.length;for(;C<H;C++){F=B[C];i.push({media:F.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:k.length-1,hasquery:F.indexOf("(")>-1,minw:F.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:F.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}j()},l,r,v=function(){var z,A=w.createElement("div"),x=w.body,y=false;A.style.cssText="position:absolute;font-size:1em;width:1em";if(!x){x=y=w.createElement("body");x.style.background="none"}x.appendChild(A);s.insertBefore(x,s.firstChild);z=A.offsetWidth;if(y){s.removeChild(x)}else{x.removeChild(A)}z=p=parseFloat(z);return z},p,j=function(I){var x="clientWidth",B=s[x],H=w.compatMode==="CSS1Compat"&&B||w.body[x]||B,D={},G=b[b.length-1],z=(new Date()).getTime();if(I&&l&&z-l<h){clearTimeout(r);r=setTimeout(j,h);return}else{l=z}for(var E in i){var K=i[E],C=K.minw,J=K.maxw,A=C===null,L=J===null,y="em";if(!!C){C=parseFloat(C)*(C.indexOf(y)>-1?(p||v()):1)}if(!!J){J=parseFloat(J)*(J.indexOf(y)>-1?(p||v()):1)}if(!K.hasquery||(!A||!L)&&(A||H>=C)&&(L||H<=J)){if(!D[K.media]){D[K.media]=[]}D[K.media].push(k[K.rules])}}for(var E in q){if(q[E]&&q[E].parentNode===f){f.removeChild(q[E])}}for(var E in D){var M=w.createElement("style"),F=D[E].join("\n");M.type="text/css";M.media=E;f.insertBefore(M,G.nextSibling);if(M.styleSheet){M.styleSheet.cssText=F}else{M.appendChild(w.createTextNode(F))}q.push(M)}},n=function(x,z){var y=c();if(!y){return}y.open("GET",x,true);y.onreadystatechange=function(){if(y.readyState!=4||y.status!=200&&y.status!=304){return}z(y.responseText)};if(y.readyState==4){return}y.send(null)},c=(function(){var x=false;try{x=new XMLHttpRequest()}catch(y){x=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return x}})();a();respond.update=a;function t(){j(true)}if(e.addEventListener){e.addEventListener("resize",t,false)}else{if(e.attachEvent){e.attachEvent("onresize",t)}}})(this);
+(function(a){function w(){t(true)}function x(){var a=navigator.userAgent,b=-1;var c=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");if(c.exec(a)!=null)b=parseFloat(RegExp.$1);return window!=window.top&&b>=9}a.respond={};respond.update=function(){};respond.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches;if(respond.mediaQueriesSupported&&!x()){return}var b=a.document,c=b.documentElement,d=[],e=[],f=[],g={},h=30,i=b.getElementsByTagName("head")[0]||c,j=b.getElementsByTagName("base")[0],k=i.getElementsByTagName("link"),l=[],m=function(){var b=k,c=b.length,d=0,e,f,h,i;for(;d<c;d++){e=b[d],f=e.href,h=e.media,i=e.rel&&e.rel.toLowerCase()==="stylesheet";if(!!f&&i&&!g[f]){if(e.styleSheet&&e.styleSheet.rawCssText){o(e.styleSheet.rawCssText,f,h);g[f]=true}else{if(!/^([a-zA-Z:]*\/\/)/.test(f)&&!j||f.replace(RegExp.$1,"").split("/")[0]===a.location.host){l.push({href:f,media:h})}}}}n()},n=function(){if(l.length){var a=l.shift();u(a.href,function(b){o(b,a.href,a.media);g[a.href]=true;n()})}},o=function(a,b,c){var f=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=f&&f.length||0,b=b.substring(0,b.lastIndexOf("/")),h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c,j=0,k,l,m,n,o;if(b.length){b+="/"}if(i){g=1}for(;j<g;j++){k=0;if(i){l=c;e.push(h(a))}else{l=f[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;e.push(RegExp.$2&&h(RegExp.$2))}n=l.split(",");o=n.length;for(;k<o;k++){m=n[k];d.push({media:m.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:e.length-1,hasquery:m.indexOf("(")>-1,minw:m.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:m.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}t()},p,q,r=function(){var a,d=b.createElement("div"),e=b.body,f=false;d.style.cssText="position:absolute;font-size:1em;width:1em";if(!e){e=f=b.createElement("body");e.style.background="none"}e.appendChild(d);c.insertBefore(e,c.firstChild);a=d.offsetWidth;if(f){c.removeChild(e)}else{e.removeChild(d)}a=s=parseFloat(a);return a},s,t=function(a){var g="clientWidth",j=c[g],l=b.compatMode==="CSS1Compat"&&j||b.body[g]||j,m={},n=k[k.length-1],o=(new Date).getTime();if(a&&p&&o-p<h){clearTimeout(q);q=setTimeout(t,h);return}else{p=o}for(var u in d){var v=d[u],w=v.minw,x=v.maxw,y=w===null,z=x===null,A="em";if(!!w){w=parseFloat(w)*(w.indexOf(A)>-1?s||r():1)}if(!!x){x=parseFloat(x)*(x.indexOf(A)>-1?s||r():1)}if(!v.hasquery||(!y||!z)&&(y||l>=w)&&(z||l<=x)){if(!m[v.media]){m[v.media]=[]}m[v.media].push(e[v.rules])}}for(var u in f){if(f[u]&&f[u].parentNode===i){i.removeChild(f[u])}}for(var u in m){var B=b.createElement("style"),C=m[u].join("\n");B.type="text/css";B.media=u;i.insertBefore(B,n.nextSibling);if(B.styleSheet){B.styleSheet.cssText=C}else{B.appendChild(b.createTextNode(C))}f.push(B)}},u=function(a,b){var c=v();if(!c){return}c.open("GET",a,true);c.onreadystatechange=function(){if(c.readyState!=4||c.status!=200&&c.status!=304){return}b(c.responseText)};if(c.readyState==4){return}c.send(null)},v=function(){var a=false;try{a=new XMLHttpRequest}catch(b){a=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return a}}();m();respond.update=m;if(a.addEventListener){a.addEventListener("resize",w,false)}else if(a.attachEvent){a.attachEvent("onresize",w)}})(this)
View
@@ -42,7 +42,7 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
respond.mediaQueriesSupported = win.matchMedia && win.matchMedia( "only all" ).matches;
//if media queries are supported, exit here
- if( respond.mediaQueriesSupported ){ return; }
+ if( respond.mediaQueriesSupported && !isIE9iframe() ){ return; }
//define vars
var doc = win.document,
@@ -323,4 +323,12 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
else if( win.attachEvent ){
win.attachEvent( "onresize", callMedia );
}
+ //test for IE9 iframe
+ function isIE9iframe() {
+ var ua = navigator.userAgent,
+ ie_version = -1;
+ var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+ if (re.exec(ua) != null) ie_version = parseFloat( RegExp.$1 );
+ return ( window != window.top && ie_version >= 9.0 );
+ }
})(this);

4 comments on commit 1c86c66

@davidefassola

Works fine for me.
Thanks.

@leslc
leslc commented on 1c86c66 Aug 6, 2013

Thanks, this saved me hours of random debugging!

@drywall
drywall commented on 1c86c66 Aug 6, 2013

Glad this has been of use to someone other than me.

@rbev
rbev commented on 1c86c66 Jun 26, 2015

This worked for me temporarily when just changing my .js and refreshing.
As soon as i reset the browser the problem comes back

Please sign in to comment.