[JS] IFrame動態自動增高

2011-07-21

最近要做一隻主程式裡面包多個子頁籤，每個頁籤都有關聯的動態程式，因此需要在子程式畫面變動時，自動調整IFrame高度，避免Scrollbar的出現。

當IFrame是靜態內容，可直接在IFrame的onload自動增高，如果IFrame內容是動態程式，就需要在程式中執行自動增高JS，小弟的作法是IFrame網址多傳入IFrame的ID，然後動態程式接ID參數再執行自動增高JS，如此就可以將動態程式完美地包在主程式中。

我使用Update Panel，所以需要接值後在Page_PreRender註冊SetFrameHeight("test");語法，非AJAX的作法可以放在onLoad事件就可以了。

此方法經過測試可相容於IE、FF、CHROME瀏覽器。

<iframe id="test" style="width:100%;" scrolling="no" frameborder="0" 
src='./test.aspx?iframeid=test'></iframe>


//自動調整FRAME高度
function SetFrameHeight(iframeID) 
{
    parent.document.getElementById(iframeID).height = (document.body.scrollHeight+10)+'px';
}