前台界面改造的一些问题和收获

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lvhao2813/article/details/83582921

背景:

一个旧项目的界面改造。

首先从首页开始,首页将导航,菜单等等设置。通过页面里的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 onload="initNavs()">这样的写法。

这样无法让iframe里面的异步加载。需要等待构造后加载。

$(function(){
        initNavs();
    })
更换写法。

猜你喜欢

转载自blog.csdn.net/lvhao2813/article/details/83582921
今日推荐