文章

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://photo.minwt.com/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就大功告成啦！

[範例預覽] [範例下載]

引用網址：※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！謝謝。
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處，謝謝。