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"  οnlοad="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、火狐、谷歌 、世界之窗、搜狗 浏览器测试过，能用。再多就没有了，我的机器就安装了这点浏览器测试，但是感觉应该能满足大家的需要了。嘿嘿~~~

   感谢 luluping 博客对我的帮助

  原文章：

  http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html

  希望能跟有共同爱好的人成为朋友  2281879713  本人的QQ