製作iframe需要垂直空間

Question

我想要一個iframe需要儘可能多的垂直空間，因爲它需要顯示其內容並且不顯示滾動條。這是否可能？

是否有任何解決方法？

Answer 1

這應該在IFRAME高度設爲其內容的高度：

<script type="text/javascript"> 
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight; 
document.getElementById('the_iframe').height = the_height; 
</script> 

您可能需要添加scrolling="no"您IFRAME關閉滾動條。

編輯：哎呀，忘了宣佈the_height。

Answer 2

這個CSS代碼段應該刪除垂直滾動條：

body { 
    overflow-x: hidden; 
    overflow-y: hidden; 
} 

我還沒有確定聯繫有關佔用儘可能多的垂直空間，因爲它需要的，但如果我不明白，我會看到出來。

Answer 3

添加DOCTYPE聲明的IFRAME源文件將有助於從線

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight 

看到W3C DOCTYPE for examples

我與IE和FF問題計算正確的值，因爲它是渲染iframe文檔處於'怪癖'模式，直到我添加了DOCTYPE。

FF/IE/Chrome支持：.scrollHeight不適用於Chrome，因此我提出了一個使用jQuery的javascript示例，基於iframes內容在頁面上設置所有IFRAME高度。注意：這是用於當前域中的參考頁面。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('iframe').each(function(){ 
      var context = $(this); 
      context.load(function(event){ // attach the onload event to the iframe 
       var body = $(this.contentWindow.document).find('body'); 
       if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents 
        context.height($(body.get(0)).height() + 20); 
       } else { 
        context.hide(); // hide iframes with no contents 
       } 
      }); 
     }); 
    }); 
</script> 

Answer 4

解決方法是不要在服務器端使用和預處理代碼。

Answer 5

還檢查出這個線程：How does the DiggBar dynamically resize its iframe's height based on content not on their domain?。

它解決了同樣的問題。