Skip to content

Instantly share code, notes, and snippets.

@leodutra
Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leodutra/a629b722ca9495972fd4 to your computer and use it in GitHub Desktop.
Save leodutra/a629b722ca9495972fd4 to your computer and use it in GitHub Desktop.
IFrame Default Attributes Reference + Scroll Definition (IE 8- Fix)
<!--
seamless="seamless" - Specifies that the <iframe> should look like it is a part of the containing document
allowTransparency="true" - old "seamless" alternative (is not a W3C spec/ option)
frameborder="0" - no border on old browsers (deprecated on HTML5)
scrolling="auto" - Specifies whether or not to display scrollbars in an <iframe> (deprecated on HTML5)
horizontalscrolling - force hide horizontal scrolling on (IE fix)
verticalscrolling - force hide vertical scrolling on (IE fix)
AUTO RESIZE IFRAME
https://github.com/davidjbradshaw/iframe-resizer
-->
<iframe
seamless="seamless"
allowtransparency="true"
frameborder="0"
border="0"
scrolling="auto"
horizontalscrolling="no"
verticalscrolling="yes"
style="position: relative; overflow-x: auto; overflow-y: auto;"
src="about:blank"
></iframe>
// FROM: https://gist.github.com/LeoDutra/a629b722ca9495972fd4
function smartCreateIFrame(opts, attrs) {
/*
opts = {
src:String="javascript:false;",
scrollY:Boolean=true,
scrollX:Boolean=true,
seamless:Boolean=true
}
*/
opts = opts || {};
var scrollY = opts.scrollY !== false;
var scrollX = opts.scrollX !== false;
opts.seamless = opts.seamless !== false;
var baseAttr = {
allowtransparency: opts.seamless,
frameborder: '0',
border: '0',
// IE FIX BEGIN
scrolling: scrollY || scrollX ? 'auto' : 'no' ,
horizontalscrolling: scrollX ? 'yes' : 'no',
verticalscrolling: scrollY ? 'yes' : 'no',
// IE FIX END
css: {
// IE FIX BEGIN
position: 'relative',
'overflow-x': scrollX ? 'auto' : 'hidden',
'overflow-y': scrollY ? 'auto' : 'hidden'
// IE FIX END
},
src: opts.src || 'about:blank'
};
if (opts.seamless) {
baseAttr.seamless = "seamless";
}
if (attrs && typeof attrs == 'object') {
$.extend(baseAttr, attrs);
}
return $('<iframe>', baseAttr);
}
// Node.JS / CommonJS module detection
if (typeof module !== 'undefined' && modules.export) modules.export.smartCreateIFrame = smartCreateIFrame;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment