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);
    });
});

确保您遵循Same-Origin Policy

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，否则您将遇到跨域问题，并且您将无法解决此问题。您的网站根本无法访问已加载的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/

当iframe内容发生变化时，iframe会自动重新调整大小

2 个答案: