下面是一个简单的解决方案，使用与iframe内容相同的服务器提供的动态生成的样式表。很简单，样式表“知道”iframe中有什么，并且知道用于设置iframe样式的维度。这就绕过了同源策略限制。

http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/

因此，所提供的iframe代码将有一个附带的样式表，像这样…

<link href=“http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget” rel=“stylesheet” type=“text/css” /> <iframe id=“iframe_widget” src=“http://your.site/path/to/content?content_id=1234” frameborder=“0” width=“100%” scrolling=“no”></iframe>

这要求服务器端逻辑能够计算iframe呈现内容的尺寸。

找不到能完美处理大文本+大图像的东西，但我最终得到了这个，似乎这是对的，或者几乎是对的，每一次:

    iframe.addEventListener("load",function(){
        // inlineSize, length, perspectiveOrigin, width
        let heightMax = 0;
        // this seems to work best with images...
        heightMax = Math.max(heightMax,iframe.contentWindow.getComputedStyle(iframe.contentWindow.document.body).perspectiveOrigin.split("px")[0]);
        // this seems to work best with text...
        heightMax = Math.max(heightMax,iframe.contentWindow.document.body.scrollHeight);
        // some large 1920x1080 images always gets a little bit off on firefox =/
        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
        if(isFirefox && heightMax >= 900){
            // grrr..
            heightMax = heightMax + 100;
        }

        iframe.style.height = heightMax+"px";
        //console.log(heightMax);
    });

使用jquery加载(跨浏览器):

 <iframe src="your_url" marginwidth="0"  marginheight="0" scrolling="No" frameborder="0"  hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%"  width="100%"></iframe>

function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
 }  

在响应式页面中调整大小:

$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
 $('#frame').css("height", heightFrame);
}
});

当你想缩小网页以适应iframe大小时:

您应该调整iframe的大小以适应内容 然后你应该缩小整个iframe与加载的网页内容

这里有一个例子:

<div id="wrap">
   <IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div>

<style type="text/css">
    #wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
    #frame { width: 900px; height: 600px; border: 1px solid black; }
    #frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>

获取iframe内容高度，然后将其赋给这个iframe

 var iframes = document.getElementsByTagName("iframe");
 for(var i = 0, len = iframes.length; i<len; i++){
      window.frames[i].onload = function(_i){
           return function(){
                     iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
                     }
      }(i);
 }

我正在实现ConroyP的帧中帧解决方案，以取代基于设置文档的解决方案。域，但发现它是相当困难的确定iframe的内容的高度在不同的浏览器(测试与FF11, Ch17和IE9现在)。

ConroyP uses:

var height = document.body.scrollHeight;

但这只适用于初始页面加载。我的iframe有动态内容，我需要在某些事件上调整iframe的大小。

我最终为不同的浏览器使用了不同的JS属性。

function getDim () {
    var body = document.body,
        html = document.documentElement;

    var bc = body.clientHeight;
    var bo = body.offsetHeight;
    var bs = body.scrollHeight;
    var hc = html.clientHeight;
    var ho = html.offsetHeight;
    var hs = html.scrollHeight;

    var h = Math.max(bc, bo, bs, hc, hs, ho);

    var bd = getBrowserData();

    // Select height property to use depending on browser
    if (bd.isGecko) {
        // FF 11
        h = hc;
    } else if (bd.isChrome) {
        // CH 17
        h = hc;
    } else if (bd.isIE) {
        // IE 9
        h = bs;
    }

    return h;
}

getBrowserData()是受Ext Core http://docs.sencha.com/core/source/Ext.html#method-Ext-apply启发的浏览器检测函数

这在FF和IE上运行得很好，但在Chrome上就出现了问题。其中一个是时间问题，显然Chrome需要一段时间来设置/检测iframe的高度。如果iframe比内容高，Chrome也不会正确返回iframe中内容的高度。当高度降低时，这将不适用于动态内容。

为了解决这个问题，我总是在检测内容高度之前将iframe设置为较低的高度，然后将iframe高度设置为正确的值。

function resize () {
    // Reset the iframes height to a low value.
    // Otherwise Chrome won't detect the content height of the iframe.
    setIframeHeight(150);

    // Delay getting the dimensions because Chrome needs
    // a few moments to get the correct height.
    setTimeout("getDimAndResize()", 100);
}

代码没有优化，这是从我的devel测试:)

希望有人觉得这有用!