當iframe的內容更改時，iframe自動調整大小

Question

選擇下拉值時，我的iframe（在其他域上）在內部使用Ajax並更改數據高度。

請訪問我的iframe演示[此處] (http://jsfiddle.net/pq7twrh2/5/)

在我的iframe中，當我選擇所有下拉菜單時，先顯示數據，然后再增加高度。 我想當內容或高度增加時，我的框架高度會自動增加。 這怎么可能？

Answer 1

嘗試將其添加到您的iframe源中：

$(document).ready(function(){
    $('#engineType').change(function(){
        $('#iframe1', window.parent.document).height($('#VehicleDetails').height() + 227);
    });
});    

確保遵循“ 同源政策”

Answer 2

幾種方法之一是獲取iframe內容（這是您網站的內容）並獲取主體的高度並設置iframe的高度。 除非出現此錯誤，否則： The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match ，您遇到跨域問題，您將無法解決。 您的網站根本無法訪問已加載的iframe網站。

但是，如果您能夠做到這一點，它將是這樣的：

jQuery(function($){
    var lastHeight = 0, curHeight = 0, $frame = $('iframe');
    setInterval(function(){
        console.log($frame.get());
        curHeight = $frame.contents().find('body').height();    
        if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
        }
    },500);
});

這將每隔半秒鍾檢查iframe網站body的高度，並設置iframe高度（如果已更改）： http : //jsfiddle.net/pq7twrh2/7/