-
-
Save mathiasbynens/944168 to your computer and use it in GitHub Desktop.
New defaultDisplay()
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ]; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ]; | |
} |
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
Ah I missed your rewrite when commenting. Looks a lot better \o/. Though, I still see the
( iframe.contentWindow || iframe.contentDocument ).document
, if theiframe.contentDocument
side is used it would be like doingdocument.document
and should returnundefined
for the iframe document.I think some browsers barf when not passing something like
null
as the second argument ofgetComputedStyle
, Also I think you should avoidwindow.getComputedStyle
and instead store a reference toelem.ownerDocument.defaultView
in a var so it can be reused throughout the snippet.display === "false"
should bedisplay == ""
.