设置iframe的高度和控制其所在层的边框动态显示

文件使用了模板页,可以将中间部分剥离出来.

要实现的效果如下:

上图中的树形目录与右侧的操作界面中间的分隔线的如何显示:

分隔线的左侧是一个div层,其内嵌一个iframe框架,因此它的高度是动态的,而分隔线的右侧也是一个嵌套了iframe的div层,随着显示的不同界面,其高度也是动态变化的,那么分隔线的显示应该使用高度最高的那一个层的边框线,下面就是确定哪一个div层的高度最高.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link href="../Styles/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../Scripts/dialog.js"></script>
<script type="text/javascript" src="../Scripts/Department.js"></script>
<script type="text/javascript">
function SetCwinHeight(obj) {
var cwin = obj;
if (document.getElementById) {
if (cwin && !window.opera) {
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS
else if (cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document.body.scrollHeight + 10; //IE
}
else {
if (cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
cwin.height = cwin.contentWindow.document.body.scrollHeight; //Opera
}
}
if (cwin.name == "deptTree")
$("#leftheight").val(cwin.height);
if (cwin.name == "deptUser")
$("#rightheight").val(cwin.height);

var lheight = parseInt($("#leftheight").val());
var rheight = parseInt($("#rightheight").val());
if (!isNaN(lheight) && !isNaN(rheight)) {
if (lheight > rheight) {
$("#depart_left").css("border-right", "1px solid #999");
$("#depart_right").css("border-left", "0px solid #999");
}
else {
$("#depart_left").css("border-right", "0px solid #999");
$("#depart_right").css("border-left", "1px solid #999");
}
}
}

</script>
<script type="text/javascript">
var dept = {};
dept.HidDeptUserID = "<%=HidDeptUserID.ClientID %>";
</script>

<!--这里的两个隐藏字段,是为了辅助记录层的高度,因为服务器控件在初始化的时候,会有数次的服务器与客户端之间的往返,这种动态数据必须记录下来,否则会在往返中丢失-->
<asp:HiddenField ID="leftheight" runat="server" />
<asp:HiddenField ID="rightheight" runat="server" />
<div style="width:100%">
<table class="table" width="99%" cellspacing="0">
<tr bgcolor="#efefef"><td height="25" align="left">
<div><strong> 组织架构</strong></div>

</td></tr>
<tr><td>
<div style="text-align:center;">
<div style=" text-align:left;">
<asp:Button ID="btnAddUser" CssClass="button" runat="server" Text="添加员工" OnClientClick="return addEntUser();" />
<asp:Button ID="btnAddOrganizationPermission" CssClass="button" runat="server" Text="添加职务" OnClientClick="return addOrganizationPermission();" />
<asp:Button ID="btnAddDepart" CssClass="button" runat="server" Text="添加部门" OnClientClick="return addDetpart();" />
<asp:Button ID="btnRelated" CssClass="button" runat="server" Text="添加工作关系" OnClientClick="return Related();"/>
<asp:Button ID="btnDel" CssClass="button" runat="server" Text="删除"
OnClientClick="return DeleteDepartUser();" onclick="btnDel_Click" />
</div>
<br />
<div>
<div id="depart_left" style="height:100%; overflow:visible; width:218px;">
<iframe name="deptTree" id="deptTree" src="DeptTree.aspx" marginheight="0" marginwidth="0"
frameborder="0" allowtransparency="true" onload='SetCwinHeight(this);' scrolling="no"
width="218px"></iframe>
</div>
<div id="depart_right" style="height:100%; overflow:visible; width:496px;">
<iframe name="deptUser" id="deptUser" src="AddDepart.aspx?type=modify"
marginheight="0" marginwidth="0"
frameborder="0" allowtransparency="true" onload='SetCwinHeight(this);'
scrolling="no" style="width: 496px"></iframe>
</div>
</div>
<script type="text/javascript">



</script>
<input id="HidDeptUserID" type="hidden" runat="server" value="0" class="hidcalss" />
</div>

</td></tr>
</table>
</div>

</asp:Content>