Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New defaultDisplay()
var elemDisplays = {},
// Store the iframe outside the function to reuse it
iframe,
iframeDoc;
function defaultDisplay( nodeName ) {
if ( !elemDisplays[ nodeName ] ) {
// Try the classical method first, which is far faster
var elem = document.createElement( nodeName ),
display;
document.body.appendChild( elem );
display = window.getComputedStyle( elem ).getPropertyValue( "display" );
document.body.removeChild( elem );
// if the display value is "none", use an iframe
if ( display === "none" || display === "false" ) {
// No iframe to use yet, so create it
if ( !iframe ) {
iframe = document.createElement( "iframe" );
iframe.frameBorder = iframe.width = iframe.height = 0;
}
document.body.appendChild( iframe );
/* Create a cacheable copy of the iframe document on
* first call.
* IE and Opera will allow us to reuse the iframeDoc
* without re-writing the fake html document to it,
* WebKit & Firefox won't allow reusing the iframe document
*/
if ( !iframeDoc || !iframe.createElement ) {
iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
iframeDoc.write( "<!doctype><html><body></body></html>" );
}
elem = iframeDoc.createElement( nodeName );
iframeDoc.body.appendChild( elem );
display = jQuery.css( elem, "display" );
document.body.removeChild( iframe );
}
elemDisplays[ nodeName ] = display;
}
return elemDisplays[ nodeName ];
}
var elemDisplays = {},
// Store the iframe outside the function to reuse it
iframe,
iframeDoc;
function defaultDisplay( nodeName ) {
if ( !elemDisplays[ nodeName ] ) {
// Try the classical method first, which is far faster
var elem = document.createElement( nodeName ),
body = document.body,
display,
style;
body.appendChild( elem );
display = window.getComputedStyle ? window.getComputedStyle( elem ).getPropertyValue( "display" ) : "none";
body.removeChild( elem );
// if the display value is "none", use an iframe
if ( display === "none" || display === "" ) {
// No iframe to use yet, so create it
if ( !iframe ) {
iframe = document.createElement( "iframe" );
iframe.frameBorder = iframe.width = iframe.height = 0;
}
body.appendChild( iframe );
/* Create a cacheable copy of the iframe document on
* first call.
* IE and Opera will allow us to reuse the iframeDoc
* without re-writing the fake html document to it,
* WebKit & Firefox won't allow reusing the iframe document
*/
if ( !iframeDoc || !iframe.createElement ) {
iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
iframeDoc.write( "<!doctype html><html><body>" );
iframeDoc.close();
}
elem = iframeDoc.createElement( nodeName );
style = element.currentStyle || element.style;
iframeDoc.body.appendChild( elem );
if ( document.defaultView && document.defaultView.getComputedStyle ) {
display = elem.ownerDocument.defaultView.getComputedStyle( elem, null ).getPropertyValue( 'display' );
if ( display == "" ) {
display = style.display;
}
} else {
display = style.display;
}
body.removeChild( iframe );
}
elemDisplays[ nodeName ] = display;
}
return elemDisplays[ nodeName ];
}
@mathiasbynens
Copy link
Author

mathiasbynens commented Apr 27, 2011

Mad props to @gf3 and @jdalton!

Quick demo / test case: http://mathiasbynens.be/demo/default-display Still a work in progress.

@jdalton
Copy link

jdalton commented Apr 27, 2011

You’re forgetting IE support. Also see this for other considerations. I think this technique requires moar testing.

@jdalton
Copy link

jdalton commented Apr 27, 2011

Ah I missed your rewrite when commenting. Looks a lot better \o/. Though, I still see the ( iframe.contentWindow || iframe.contentDocument ).document, if the iframe.contentDocument side is used it would be like doing document.document and should return undefined for the iframe document.

I think some browsers barf when not passing something like null as the second argument of getComputedStyle, Also I think you should avoid window.getComputedStyle and instead store a reference to elem.ownerDocument.defaultView in a var so it can be reused throughout the snippet.

display === "false" should be display == "".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment