[JS] 依 iframe 內容動態調整高度

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 上測過，我想大致應該是沒問題了。