基于界面美觀和交互的考慮，在網(wǎng)頁(yè)制作中隱藏Iframe的border和scrollbar，讓人看不出它是個(gè)Iframe，而不帶邊框的Iframe因?yàn)槟芎途W(wǎng)頁(yè)無(wú)縫的結(jié)合從而在不刷新頁(yè)面的情況下使更新頁(yè)面的部分?jǐn)?shù)據(jù)成為可能。
如果Iframe始終調(diào)用同一個(gè)固定高度的頁(yè)面，我們直接寫(xiě)死Iframe高度就可以了。由于Iframe要切換頁(yè)面，或者被包含頁(yè)面要做動(dòng)態(tài)操作，這時(shí)候，就需要程序去同步Iframe高度和被包含頁(yè)的實(shí)際高度了，而Iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來(lái)了使用上的麻煩 : 給Iframe設(shè)置高度多了的時(shí)候會(huì)使網(wǎng)頁(yè)下方出現(xiàn)空白，少了則只能顯示部分網(wǎng)頁(yè)。
于是在實(shí)際工作當(dāng)中，我總結(jié)了一種Iframe動(dòng)態(tài)調(diào)整高度的方法，即實(shí)現(xiàn) Iframe 的自適應(yīng)高度，能夠隨著頁(yè)面的長(zhǎng)度自動(dòng)適應(yīng)以免除頁(yè)面和 Iframe 同時(shí)出現(xiàn)滾動(dòng)條的現(xiàn)象。
以“北京出入境檢驗(yàn)檢疫局”網(wǎng)頁(yè)設(shè)計(jì)為例，在點(diǎn)擊某一鏈接后頁(yè)面頭部和左側(cè)不變，右側(cè)跳轉(zhuǎn)到相應(yīng)內(nèi)容，實(shí)現(xiàn)了Iframe不帶邊框的自適應(yīng)文章高度的調(diào)節(jié)。
如圖所示：
現(xiàn)在就把解決方法共享一下：
方法：在主頁(yè)面Iframe的onload事件中執(zhí)行JS，去取得被包含頁(yè)的高度，然后去同步高度。并在主窗口做一個(gè)Interval，不停的來(lái)獲取被包含頁(yè)的高度。當(dāng)Iframe窗體高度高于文檔實(shí)際高度的時(shí)候，高度取的是窗體高度，而當(dāng)窗體高度低于實(shí)際文檔高度時(shí)，取的是文檔實(shí)際高度。因此，要想辦法在同步高度之前把高度設(shè)置到一個(gè)比實(shí)際文檔低的值。所以，添加 onload=”this.height=100″，讓頁(yè)面加載的時(shí)候先縮到足夠矮，然后再同步到一樣的高度。
代碼如下所示：
<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這個(gè)數(shù)值可以根據(jù)需要自行設(shè)置，即頁(yè)面加載時(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)高度的問(wèn)題。
聯(lián)系客服
