Javascript 如何使页面内容重新调整为iframe大小

这是我的第一个问题，请耐心听我说

我有一个带有小图库的页面，我有一些缩略图作为链接，以便将某些图像加载到iframe上。下面是我的文字

现在，我的iframe会根据其内容的大小进行调整，这正是我想要的，而且，我的图像的大小不尽相同，因此当它们加载到iframe时，它们会向下推送文本。 到目前为止还不错

问题是，如果我加载一个高度为600px的图像，然后加载一个高度为200px的图像，下面的文本将保留在600px图像推送它的位置

我想要的是文本重新调整到de iframe上当前加载图像的高度

帮助？

我用jquery1.10.2为您编写了这篇文章，它将根据您的iFrame宽度动态设置文本的宽度。 首先，将jQuery添加到页面中

然后给出iframe的宽度，并为textwrapper设置此宽度：

<script type="text/javascript" language="javascript">
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(document).ready(function(e) {
    $('#columnthumb img').click(function(){
        var width = $('iframe').width();//if you want to write it for your img, write img instead of iframe
        //alert(width + '<-----Width');//this is for test and figure out your iframe's width
        $('p.textocorpo').css({'width':width, 'text-align':'justify'});
    });
});
</script>

---

你能在jsiddle上显示或重新创建这个实时版本吗？如果你在jsbin.com或jsiddle上做一个演示，我更喜欢jsbin，我可能会有所帮助。此站点：将为您提供图像占位符。这是jsfidle，尽管我似乎无法使iframe的自动调整大小正常工作@ShomzHere是jsfidle，尽管我似乎无法让iframe的自动调整大小工作。。。[jsfiddle]@m59问题是我确实需要动态设置它。我需要文本始终位于iframe的正下方，无论其大小。这是您想要的文本：JoséAmaro Stricta:Design de Comunicação I Data:Abril de 2013 Impressionão:Offsetno。。。但是谢谢你的回复！我明天要交作业，所以我没有太多时间去探索，但非常感谢你的帮助，也很抱歉给你添麻烦@基亚拉什

<script type="text/javascript" language="javascript">
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(document).ready(function(e) {
    $('#columnthumb img').click(function(){
        var width = $('iframe').width();//if you want to write it for your img, write img instead of iframe
        //alert(width + '<-----Width');//this is for test and figure out your iframe's width
        $('p.textocorpo').css({'width':width, 'text-align':'justify'});
    });
});
</script>

You need to do it like this

Conceptual:
onclick get image height then set image height to iframe height.

Code:

<script type="text/javascript" language="javascript">

$(document).ready(function(e) {

    $('#ImagesColumn img').click(function(){

    var imgHeight = $(this).height();        
        var imgWidth  = $(this).width();        

    $('#iframeId').css({height: imgHeight, width: imgWidth})
    $('p.textocorpo').css({'width':imgWidth, 'text-align':'justify'});


    });

});
</script>