添加加载后调整 iframe 大小

Question

在使用 javascript 在加载时注入 iframe 后，我无法调整其大小。我使用了大约 300 像素的设置宽度，它可以正常工作，但动态地将 iframe 的高度调整为其内容的大小（博客文章）。

我尝试让 contentWindow（没有子 dom 元素）和 contentDocument（未定义）无济于事。

我在加载时这样做：

var iframe = document.createElement('iframe'); 
iframe.setAttribute('id','postFrame'); 
iframe.setAttribute('frameborder','no'); 
iframe.setAttribute('scrolling','no'); 
iframe.setAttribute('onload','resizeFrame();'); 
iframe.setAttribute('width','300px'); 
iframe.setAttribute('src','http://espn.go.com/espn/print?id=7454651'); 
var container = document.getElementById('container'); 
container.appendChild(iframe);


function resizeFrame(){ /* resize iframe based on content height*/ }

有没有办法根据 iframe 中的内容调整 iframe 高度的大小？

*编辑**

可能的解决方法：

有没有希望我可以使用 Access-Control-Allow-Origin 来解决问题？假设 iframe 中的页面是我自己的，或者是从 php 脚本中回显的

Answer 1

我使用以下函数将 iframe 调整为内容的高度。它适用于 Intranet 应用程序（仅在 IE8 中经过适当测试），但确实有效，因此它可能会提供缺失的线索-

function sizeIframeToContent(id) {
    // resize iframe to be the height of the content
    try {
        var frame = document.getElementById(id);
        innerDoc = (frame.contentDocument) ?
                   frame.contentDocument : frame.contentWindow.document;
        var objToResize = (frame.style) ? frame.style : frame;
        objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
        //objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
    }
    catch (err) {
        console.log(err.message);
    }
}

编辑说明-一旦加载了文档，您应该能够找到文档高度，然后您可以将其用作 iframe 的高度。当您特别询问高度时，我评论了上述函数的宽度部分。