JavaScript Iframe自动调整大小

Posted 2021-02-24

Given an iframe element and a header element, make the iframe just high enough to fit in the browser window. On window resize, readjust. Keep a minimum height for the iframe.

function autoSizeIframeHeight(iframe, header, minHeight) {
	minHeight = minHeight || 300;
	function getViewportHeight() {
		var h = document.documentElement.clientHeight;
		return document.compatMode === "CSS1Compat" && h || document.body.clientHeight || h;
	}
	function getHeaderHeight() {
		return parseFloat(getComputedStyle(header,'height'));
	}
	function getComputedStyle(el, cssprop){
		if (el.currentStyle) { // IE
			return el.currentStyle[cssprop];
		}
		else if (document.defaultView && document.defaultView.getComputedStyle) {
			return document.defaultView.getComputedStyle(el, "")[cssprop];
		}
		else {
			return el.style[cssprop];
		}
	}
	function setIframeHeight() {
		var toHeight = getViewportHeight() - getHeaderHeight();		
		iframe.height = Math.max(toHeight, minHeight);
		body.style.overflowY = toHeight < minHeight ? 'auto' : 'hidden';
	}
	var body = document.body || document.getElementsByTagName('body')[0];
	setIframeHeight();
	if (window.addEventListener) {
		window.addEventListener('resize', setIframeHeight, false);
	}
	else if (window.attachEvent) {
		window.attachEvent('onresize', setIframeHeight);
	}
}
// example usage:
// autoSizeIframeHeight(document.getElementById('MyFrame'), document.getElementsByTagName('header')[0], 300);