Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mathiasbynens/944168 to your computer and use it in GitHub Desktop.
Save mathiasbynens/944168 to your computer and use it in GitHub Desktop.
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 ];
}
@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 == "".

@RupenAnjaria
Copy link

I understand that this is very very old code, however it was helpful in one scenario I believe.
Background: jQuery version 2.1.3 (https://code.jquery.com/jquery-2.1.3.js) has following snippet:

iframe = (iframe || jQuery( "<iframe frameborder='0' width='0' height='0'/>" )).appendTo( doc.documentElement );

Can I replace it with following code (from your example)

if ( !iframe ) {
 iframe = document.createElement( "iframe" );
 iframe.frameBorder = iframe.width = iframe.height = 0;
}
doc.documentElement.appendChild( iframe );

The purpose is very strange, in short, web firewall's stupid rule is preventing jQuery code to be executed saying that this is an iframe injection. Will the snippet serve the original purpose?
Please let me know.
Thank you.

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