jQuery ifame嵌套ifame 自适应高度

jQuery ifame嵌套ifame 自适应高度

前一段时间但见了一个小后台， 前期功能不多， 后期随着业务的添加，功能逐渐增加。内容也不断增加，发现当初实际ifame嵌套ifame来实现点击菜单的时候局部刷新功能不能满足当前的需要了。因为有的一个jsp界面可能很短，也可能变得很长。这导致ifame的高度要是写死的话，会变得非常难看。纠结了一段时间，终于狠下心来好好捯饬一下。完了之后，发现不是很难。自己被自己吓到了 呵呵 ~~~

好了，废话说多了，开始编写代码。

首先，既然是ifame嵌套ifame，就得需要两个jsp， 分别为  jsp1， jsp2。 里面分别有一个ifame， ifame1， ifame2。这两个ifame是两个jsp中ifame的ID，是为了后面修改ifame高度用度，通过修改ifame的高度，改变其jsp的高度，从而达到jsp也能自动识别高度的效果。

jsp1中的ifame

<iframe id="ifame1"  width="1400px"  height="800px"  frameborder="0"scrolling="no" src="jsp2.jsp" ></iframe>

jsp1中的ifame没什么东西，规定一下宽度， 写死一下默认高度。 不让其显示滚动条，包含jsp2 等等 不多说了，就是一个普通的ifame 。

重要的是jsp2中的ifame和 jquery

jsp2中的ifame代码

  <iframe id="ifame2"  onload="changeHeight()" style="width:1200px"  frameborder="0" src="" ></iframe>

也很简单，不是很难吧。 跟ifame1 没多大的区别。 只不过是加了一个onload的方法，来修改ifame的高度。

changeHeignt() 代码如下：

function changeHeight(){
  //获取加载之后的界面的高度。
 var mainheigt = $("#jsppage").contents().find("body").height()+30;
  //判断，如果太小了的话，就规定一个高度，这里规定了800
   if(mainheigt <= 800){
   mainheigt = 800;
  }
//修改iframe的高度。
  $("#jsppage").height(mainheigt);
  //修改父节点的高度
  var main = $(window.parent.document).find("#mainmenu");
  var thisheight = $(document).height();
  if(thisheight <= 800){
   thisheight = 800;
  }
    main.height(thisheight);
 }

就这么点东西，也不是很复杂。 上面有注释，不多解释。不明白的话，就给我留言吧。

第一次，不太会写，希望这点东西能给大家带来帮助， 上面的功能 用IE、火狐、谷歌 、世界之窗、搜狗 浏览器测试过，能用。再多就没有了，我的机器就安装了这点浏览器测试，但是感觉应该能满足大家的需要了。

jQuery 的详细介绍：请点这里
jQuery 的下载地址：请点这里

推荐阅读：

jQuery权威指南 PDF版中文+配套源代码

jQuery实战 中文PDF+源码

《jQuery即学即用（双色）》 PDF+源代码

锋利的jQuery(第2版) 完整版PDF+源码

jQuery完成带复选框的表格行高亮显示