根据iframe框架中页面的实际高度动态改变iframe框架高度

各位是不是感觉标题很难看明白啊，其实这个标题通俗的讲就是iframe框架自适应框架内页面的高度，防止出现动态增加页面内容后，部分页面内容显示不出来的问题。

大概的思路就是，通过获取框架内页面的window对象（即：iframe.contentWindow 或者 iframe.contentDocument.parentWindow [iframe：iframe对象]），然后获取页面的body高度（即：iframeWin.document.body.scrollHeight [iframeWin：前一句的window对象]）通过css(）方法改变iframe框架高度，具体的代码如下：

//控制内联框架iframe的窗体高度
function setIframeHeight(iframe) {
	if (iframe) {
		var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
		if (iframeWin.document.body) {
			//iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
			$("#ifr_pag").css("height",iframeWin.document.body.scrollHeight);
		}
	}
};

只是这样还不够，并不能实时的动态改变框架的高度，而是只在页面发生变化时改变其高度。

为了实现实时的改变框架高度，就必须使用一个监听事件，但是使用那个监听事件好呢，经过我打量的试验，不使用html5新添事件的老版本事件里面发现只有setInterval()事件可行，setInterval()的具体作用，我就不解释拉，不懂的请自行百度。通过setInterval()不断的执行setIframeHeight(iframe)，间隔时间可以根据自己的需要设置，实现代码如下：

//动态执行setIframeHeight(),即动态更改iframe高度（频率是每秒执行5次）
$.fn.setinframeH = function(){
	var objDOM = document.getElementById('ifr_pag');
	var url = objDOM.contentWindow.location.href.split("/");
	url = url[url.length - 1];
	var int = setInterval(function(){
		setIframeHeight(objDOM)},200);

	if(url != "editQuest.html"){
		window.clearInterval(int);
	}
}

效果就不在这里展示了，感兴趣可以自己试一试，如果有问题的话，也可以给我留言哦