Dynamically adjust iFrame height
在公司的網站上發現了一個 js 的小 bug,這個頁面內鑲了 iframe ,但是因為 iframe 內的資料來源不一,所以頁面長度也必須跟著調整,原本的寫法是每兩秒去檢查iframe高度然後調整,但是在某些瀏覽器上會有問題,我後來想了一下,決定改成去抓iframe load event來調整高度,試過之後,code更簡潔,效果看來也更好,跨瀏覽器測試目前也沒問題,所以就先改成這樣用了,如果未來有問題再來調整。
code大致如下
document.getElementById('myframe').onload = function() {
var ih = document.getElementById('myframe').contentWindow.document.body.scrollHeight;
$('#myframe').css('height', (ih+50) + "px");
};
myframe就是那個 iframe 的名稱,我是多加了50px以求美觀,要怎麼運用可以再看個人需求去修改了。
____Update____
結果我很快又回來了,前面那份code因為只會在iframe第一次載入完成時才做動,所以若iframe裡面點連結然後高度改變,就沒辦法再次更新高度,於是我又研究了一下,找出這個改法,將resize事件註冊進每次iframe更新後做動,這樣應該就可以解掉大部分可預見的狀況了,然後也順便改成不需要jquery就可以跑。
var iframe = document.getElementById('myframe');
function resize() {
var ih = iframe.contentWindow.document.body.offsetHeight;
iframe.style.height = (ih +30) +"px";
}
if (iframe.attachEvent) iframe.attachEvent('onload', resize);
else iframe.addEventListener('load', resize, false);
因為偷懶我只在chrome , firefox , opera , ie10 上測過,我想大致應該是沒問題了。