在加载后加载iframe

时间:2012-01-12 22:10:17

标签: javascript html dom iframe frame

我在使用javascript在加载时注入iframe后无法调整大小。我使用大约300px的设置宽度,但工作正常,但动态调整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脚本回显的

1 个答案:

答案 0 :(得分:1)

我使用以下函数将iframe的大小调整为内容的高度。这是一个内部网应用程序(并且只在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的高度。我评论了上述函数的宽度部分,因为你特别询问了高度。