前端頁面中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>