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>