基于界面美觀和交互的考慮，在網(wǎng)頁制作中隱藏Iframe的border和scrollbar，讓人看不出它是個Iframe，而不帶邊框的Iframe因為能和網(wǎng)頁無縫的結(jié)合從而在不刷新頁面的情況下使更新頁面的部分?jǐn)?shù)據(jù)成為可能。

    如果Iframe始終調(diào)用同一個固定高度的頁面，我們直接寫死Iframe高度就可以了。由于Iframe要切換頁面，或者被包含頁面要做動態(tài)操作，這時候，就需要程序去同步Iframe高度和被包含頁的實際高度了，而Iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩 : 給Iframe設(shè)置高度多了的時候會使網(wǎng)頁下方出現(xiàn)空白，少了則只能顯示部分網(wǎng)頁。

    于是在實際工作當(dāng)中，我總結(jié)了一種Iframe動態(tài)調(diào)整高度的方法，即實現(xiàn) Iframe 的自適應(yīng)高度，能夠隨著頁面的長度自動適應(yīng)以免除頁面和 Iframe 同時出現(xiàn)滾動條的現(xiàn)象。

    以“北京出入境檢驗檢疫局”網(wǎng)頁設(shè)計為例，在點擊某一鏈接后頁面頭部和左側(cè)不變，右側(cè)跳轉(zhuǎn)到相應(yīng)內(nèi)容，實現(xiàn)了Iframe不帶邊框的自適應(yīng)文章高度的調(diào)節(jié)。

    如圖所示：

圖一

圖二

    現(xiàn)在就把解決方法共享一下：

    方法：在主頁面Iframe的onload事件中執(zhí)行JS，去取得被包含頁的高度，然后去同步高度。并在主窗口做一個Interval，不停的來獲取被包含頁的高度。當(dāng)Iframe窗體高度高于文檔實際高度的時候，高度取的是窗體高度，而當(dāng)窗體高度低于實際文檔高度時，取的是文檔實際高度。因此，要想辦法在同步高度之前把高度設(shè)置到一個比實際文檔低的值。所以，添加 onload=”this.height=100″，讓頁面加載的時候先縮到足夠矮，然后再同步到一樣的高度。

    代碼如下所示：

<Iframe src="cs2-j.html" name="contain" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" id="contain" onload="this.height=100" style=" WIDTH: 100%; "></Iframe>

// height=100這個數(shù)值可以根據(jù)需要自行設(shè)置，即頁面加載時顯示的最小高度。

<script type="text/javascript">

function reinitIframe(){

var Iframe = document.getElementById("contain");

try{

// 聲明變量取值

var bHeight = Iframe.contentWindow.document.body.scrollHeight;

vardHeight=Iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight); // 取最大值

Iframe.height = height;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

    因此，應(yīng)用此段代碼即可輕松解決Iframe自適應(yīng)高度的問題。