Javascript, 網頁設計

jQuery教學-jqeury.height滑動展開iframe高度

梅干2010/09/05
梅問題-jQuery教學-jQuery外掛-jqeury.height.js讓iframe滑動式長高
  其實讓iframe自動長高已不是什麼新技術,而要讓iframe自動長高的作法其實大同小異,就梅干以前的作法則是在嵌入的頁面中加入script碼,抓到頁面高度後,再把值丟回給上層的iframe,並將上層的iframe撐高,雖然此方法就可讓iframe自動長高,但唯一缺點就是,得在每個嵌入的頁面中加入script碼,所以梅干最近找了一隻jQuery外掛,只要把script碼加在iframe頁面中,就可自動將iframe撐高,為了讓它有些變化,梅干稍稍改了這隻外掛並加入動畫效果,一旦載入的頁面變高或縮短,iframe則會以動畫的方式,將高度自動的縮減,這樣使用者也較容易辨視出,所點選的頁面已改變了。

iframe.html
放在<head>.....</head>之間:
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="https://ds.minwt.com.tw/download/code/jquery/plugin/jquery.autoheight.js"></script>

放在<body>.....</body>之間:
<a href="main.html" target="ifm">main.html</a><br />
<a href="news.html" target="ifm">news.html</a><br />
<iframe name="ifm" class="autoHeight" frameborder="0" scrolling="no" src="main.html"></iframe>

  經梅干測試的結果,適用於各個瀏覽器上,唯一比較需注意到的是,Google Chrome瀏覽器需將網頁放在web上,才可正常運作,否則會有撐不開的情況發生,這個夠簡單吧!只要把js載入接著再把iframe的class名稱設為autoHeight就大功告成啦!
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼