其實讓iframe自動長高已不是什麼新技術，而要讓iframe自動長高的作法其實大同小異，就梅干以前的作法則是在嵌入的頁面中加入script碼，抓到頁面高度後，再把值丟回給上層的iframe，並將上層的iframe撐高，雖然此方法就可讓iframe自動長高，但唯一缺點就是，得在每個嵌入的頁面中加入script碼，所以梅干最近找了一隻jQuery外掛，只要把script碼加在iframe頁面中，就可自動將iframe撐高，為了讓它有些變化，梅干稍稍改了這隻外掛並加入動畫效果，一旦載入的頁面變高或縮短，iframe則會以動畫的方式，將高度自動的縮減，這樣使用者也較容易辨視出，所點選的頁面已改變了。
iframe.html
放在<head>…..</head>之間：
<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script> <script type=“text/javascript” src=“//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就大功告成啦！
[範例預覽] [範例下載]
回應本文