根據內容的高度調整iFrame的大小隻能放大？

看看附帶的codepen，看看我的意思。嘗試減小瀏覽器的寬度，框架應該正確調整大小。然後最大化您的瀏覽器窗口並注意框架不會重新調整其高度。根據內容的高度調整iFrame的大小隻能放大？

我有多個幀相互堆疊在一起，所以這是一個相當惱人的問題。我試過使用.height（），.outerHeight（），.innerHeight（），.scrollHeight和.clientHeight無濟於事。

var newHeight = $('#frame').contents().height(); 
$('#frame').attr('height', newHeight);

預先感謝任何/所有的幫助！

來源

2017-07-27 Craig Smith

這是一個超級惱人的問題。我們過去曾經使用過這個庫來解決它; https://github.com/davidjbradshaw/iframe-resizer - 儘管你需要訪問父頁和子頁面。它確實工作得很好，即使通過正確配置的交叉原點。我會推薦它。 – sauntimo

試試這個

function resizeFrame() { 
    var newHeight = $('#frame').contents().find("body").height(); 
    $('#frame').attr('height', newHeight + 20); 
}

來源

2017-07-27 23:45:00 ewwink

是的，應該可以工作 - 但不幸的是，我不能依靠框架將顯示的標記中存在身體元素。 –

所以我們假設它應該工作，但它不 - https://codepen.io/chavag/pen/YxypOQ –

你沒有添加'newHeight + 20'，所以將會滾動 – ewwink

試試這個

<script type="text/javascript"> 
var $ = jQuery.noConflict(); 
$(document).ready(function() { 
    $(function($){ 
     var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)'); 
     setInterval(function(){ 
     curHeight = $frame.contents().find('body').height(); 
     if (curHeight != lastHeight) { 
      $frame.css('height', (lastHeight = curHeight) + 'px'); 
      $frame.css('border-width', 0 + 'px'); 
     } 
     },0); 
    }); 
});

來源

2017-08-01 07:06:44

根據內容的高度調整iFrame的大小隻能放大？

回答

相關問題