背景:
一个旧项目的界面改造。
首先从首页开始,首页将导航,菜单等等设置。通过页面里的iframe跳转。
因为每个人的分辨率不同等等,会产生,页面放不下iframe而在index.jsp页面产生滚动条。还有iframe放不下子页面而在iframe产生一个滚动条。(双滚动条问题)。
将iframe的高度动态获取固定死。只是iframe产生滚动条。
使用document.getHeight();方法来获取总的高度。而不是document.body.offsetHeight或者document.body.scrollHeight
之间百度到好多高度。发现都是这个高度。之后发现这只是内容高度。在不同电脑上是不同的。
注意:页面尽量不要使用iframe来进行页面嵌套。。真的很难用。如果只是嵌套一层的确很好用,也没什么问题。就怕一层嵌套一层。我遇到了嵌套4层的。高度的设置让我头疼欲裂。
之后遇到过,将iframe的高度获取到2层iframe然后再传递给1层ifarme。
我们通过该方法来获得iframe高度。[iframe控件].contentWindow.document.body.scrollHeight
后面就是iframe得整个文档了。后面就可以随便玩了。
之后又遇到过,一个首页由N个iframe组合起来,根据传入的权限数字来显示。
<iframe url="<%=basePath%>/framework/pages/main/desktop/quickMenu.jsp" class="uhide" name="nav_5" id="nav_5" style="display: none;padding-bottom:5px" width="100%" height="300"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
function initNavs(){
var iframe = "";
var idex=1;
<%
for(int i=0;i<navs.size();i++){
String id = navs.get(i);
%>
iframe = $("#nav_<%=id%>");
if(<%=id%>==3){
idex=2;
}
$(iframe).attr("src",$(iframe).attr("url"));
$(iframe).show();
$(iframe).removeClass("uhide")
<%
}
%>
if(idex!=2){
$("#queryForm").hide();
}
//删除没有权限的导航
$("iframe.uhide").remove();
}
将每个iframe加载,<body οnlοad="initNavs()">这样的写法。
这样无法让iframe里面的异步加载。需要等待构造后加载。
$(function(){
initNavs();
})
更换写法。