html IFrame默认属性参考+滚动定义（IE 8-修复）

Posted 2021-05-11

// 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;

<!--
	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>