歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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()"   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 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved