前端页面中iframe配合后台逻辑所达到的理想效果

HTML中<iframe>中功能比较强大，具体属性详细：http://www.w3school.com.cn/tags/tag_iframe.asp

<iframe src="/xscwjf.action?method=lstdsq" name="iframename" width="100%" height="100%" frameborder="0"></iframe>

最常用的src为iframe中要显示的内容(以我的经验一般为后台控制层的路径，这样表示已经处理过的页面，数据可以直接获取到)；
<iframe frameborder="value"> value为0时无边框，为1时有边框;

应用场所：
1.一个页面可以有多个tab标签，每个tab标签里都可以嵌套写成一个iframe。
2.后台传到页面的数据，使用el表达式取值，用jstl表达式判断后，可以嵌套iframe标签。
3.jsp页面可以写多个iframe标签，初始状态都是style="display：none"，使用js判断显示哪个iframe，已达到业务逻辑的需要。

关于iframe高度自适应问题，以下为两个实例

一个页面一个iframe时调整自适应高度：

<c:set var="sqdbmid" value="${formlist.items[0].bmid }" />
<c:if test="${empty sqdbmid }">
	<c:set var="sqdbmid" value="${USERSESSION.userCurDeptUnid}" />
</c:if>
<input type="hidden" id="ZDYL_GYTM_SXBSSQD.bmid" name="ZDYL_GYTM_SXBSSQD.bmid" value="${sqdbmid}" />
<tr>
	<td style="width: 50%;" colspan="2">
		<iframe id="iframeContext" src="commonweb.action?method=page&formid=J40d3fd397ea44b6b5d88d5291d96707&gynd=${curYear }&deptid=${sqdbmid}" name="iframename" width="100%" height="100%" frameborder="0"></iframe>
	</td>
</tr>
<script>
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;
		}
	}
}
$(document).ready(function(){

	$("#iframeContext").bind("load",function(){
		setIframeHeight(document.getElementById('iframeContext'));
	});
});
</script>

一个页面多个iframe时调整自适应高度：

<ul class="tab-nav-wrap" id="ulaaa" style="cursor: pointer">
	<li onclick="changeLi(this,'aaa','sxxq','J6790a9d7cba4a329ecc1f8f67dfacd5')" class="active tctabaaa">事项详情</li>
	<c:if test="${formlist.items[0].f1 eq 'RW' }">
		<li onclick="changeLi(this,'aaa','tjlx','J082d28c77c442a0a92a1f00491a97cf')" class="tctabaaa">推进路线</li>
	</c:if>
	<li onclick="changeLi(this,'aaa','yjhlb','Jf0c9520781c49b4b11feae4be72ad91')" class="tctabaaa">月计划列表</li>
	<li onclick="changeLi(this,'aaa','fkjl','J380252b991244bca69c131c127457b1')" class="tctabaaa">反馈记录</li>
	<li onclick="changeLi(this,'aaa','txjl','')" class="tctabaaa">提醒记录</li>
	<li onclick="changeLi(this,'aaa','yqjl','')" class="tctabaaa">逾期记录</li>
	<li onclick="changeLi(this,'aaa','sxsy','')" class="tctabaaa">事项溯源</li>
</ul>
<div>
	<div class="tab-content-5 ">
		<iframe id="contentIframe" src="commonweb.action?method=page&formid=J6790a9d7cba4a329ecc1f8f67dfacd5&sxid=${unid}" name="iframename" width="100%" height="400px" frameborder="0"></iframe>
	</div>
</div>
<script>
function changeLi(obj,ps,type,formid){
	 var tab=$(".tab"+ps);
	 $(".tctab"+ps).each(function(i,n){
		 $(this).removeClass("active");
	 });
	 $(obj).addClass("active");
	 if(formid!=null&&formid.length>0){
		 var url="<%=request.getContextPath()%>/commonweb.action?method=page&formid="+formid+"&sxid=${unid}";
		 $("#contentIframe").attr("src",url);
	 }
}

$(document).ready(function(){
	$("#contentIframe").load(function(){
		
	});
	$("#contentIframe").bind("load",function(){
		setIframeHeight(document.getElementById('contentIframe'));
	});
});
function setIframeHeight(iframe) {
	if (iframe) {
		iframe.height=400;
		var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
		if (iframeWin.document.body) {
			iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
			console.log("iframe.height:"+iframe.height);
		}
	}
}
</script>