以前使用 iframe 時，總是無可避免當 iframe 裡的資料過長時，就得透過 scroll bar 來捲動，如果刻意將 iframe 的高度設很高，則又擔心有些時候會太浪費網頁版面，如果能夠讓 iframe 依據內容而調整高度，似乎是個比較有彈性的作法。
關於這個想法，在網路上找到兩種類似的作法。
一、Lost-In-Code
在這個網站，提供了一個方便你外掛的 javascript，jquery.autoheight.js。日後只需要將 iframe 的 class 設定為 『autoHeight』，就能夠自動調整 iframe 的高度了。雖然他取名為 jquery，但仔細去觀察 jquery.autoheight.js 這隻程式，裡面並沒有用到 jquery 的語法。作者雖然在他的網頁上註明要引用 jquery 函式庫，但我發現，不引用也是可以的。但實際操作上，自己有遇到一個問題，就是去點選瀏覽器右上方的「最大化/往下還原」時，因為不會重算父親的高度而因此破功。所以自己再加上 $(window).resize() 去重算就可以解決。也因為如此，我還是把 jquery 引用進去好了。
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.autoheight.js" type="text/javascript"></script>
<script>
$(function () {
//攔 resize 事件，並呼叫 jquery.autoheight.js 的 doIframe() 方法
$(window).resize(function () {
doIframe();
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<div class="dean_ch">這是父親頁面</div>
以下是 iframe <br />
<iframe width="100%" src="FrameA.aspx" scrolling="auto" frameborder="0" class="autoHeight" id="ifA"></iframe>
</div>
</form>
</body>
另外 『91』與 『梅問題』 也針對這方法做了介紹，可以參考。
二、Phine Solutions
這個方式適用於每個 iframe，自己去控制呼叫者(父親)所設定的高度。此外，為了處理「最大化/往下還原」的問題，也加上 $(window).resize() 的處理。
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
function DoAdjHeight() {
var theFrame = $("iframe", parent.document.body);
theFrame.each(function () {
$(this).height($(document.body).height() + 35);
});
}
$(function () {
DoAdjHeight();
$(window).resize(function () {
DoAdjHeight();
});
});
</script>
以上兩種方法，發現它們都會在程式裡面加上一個特別數字 35，似乎是一種最適切的高度位置吧！自己曾經刻意將瀏覽器的縮放比例任意變大變小，的確在有些情況，上述的兩種方式也會突然冒出 scroll bar ，但這種特殊的操作行為，或許可以當成例外，畢竟會這樣使用的人不多；但果真要去處理的話，可能就要去調整這特別的數字。目前，我將他設定為100，幾乎任何縮放比例都可以顯示正常。所以這地方，如果有需要時才去調整這參數會比較適當。
【測試程式下載 】
於測試程式中，TestA.aspx 是使用 Lost-In-Code 的方法，而 TestB.aspx 則是使用 Phine Solutions。
參考：
01：http://www.lost-in-code.com/programming/jquery-auto-iframe-height/ (lost-in-code)
02：http://www.dotblogs.com.tw/hatelove/archive/2010/08/12/javascript-iframe-autoheight.aspx (91)
03：http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html (Phine Solutions)
04：http://www.minwt.com/?p=2425
沒有留言:
張貼留言