iframe 内容更改时自动调整大小答案

【问题标题】：Iframe auto Re-size when content of iframe changeiframe 内容更改时自动调整大小
【发布时间】：2014-11-16 10:06:04
【问题描述】：

当您选择下拉值时，我的 iframe（即在其他域上）在内部使用 Ajax 并且数据高度会发生变化。

访问我的 iframe 演示 [这里](http://jsfiddle.net/pq7twrh2/5/)

在我的 iframe 中，当我选择所有下拉菜单然后显示数据然后增加高度。我想当内容或高度增加我的框架高度自动增加。这怎么可能？

【问题讨论】：

你可以访问 iframe 的源代码吗？

标签： javascript jquery ajax iframe

【解决方案1】：

尝试将其添加到您的 iframe 源中：

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

确保您关注Same-Origin Policy

【讨论】：

【解决方案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/

【讨论】：