Skip to content
This repository has been archived by the owner on Mar 24, 2020. It is now read-only.

Commit

Permalink
Adding test for IE9 in iframes
Browse files Browse the repository at this point in the history
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
drywall committed May 16, 2012
1 parent b21c578 commit 1c86c66
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 3 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)

Expand Down
2 changes: 1 addition & 1 deletion respond.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 9 additions & 1 deletion respond.src.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);

5 comments on commit 1c86c66

@davidefassola
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works fine for me.
Thanks.

@leslc
Copy link

@leslc leslc commented on 1c86c66 Aug 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this saved me hours of random debugging!

@drywall
Copy link
Author

@drywall drywall commented on 1c86c66 Aug 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@rbev
Copy link

@rbev rbev commented on 1c86c66 Jun 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Tahiche
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!!. This was driving me nuts. Dreadful IE9.
Was openening a lightbox iframe and it would destroy the whole layout, not only iframe but top window. Funnily, it wouldn´t happen with Developer Tools open which meant it was impossible to debug. My guess is IE9 applied the media-query CSS according to the size of the "active" window, so as you moved the mouse it would switch from top (big) to iframe (small) and just go crazy.

Please sign in to comment.