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

Question

这是我的第一个问题，所以请耐心等待。

我有一个带有小画廊的页面，我有一些缩略图是链接，以便某些图像加载到 iframe 上。在它下面我有文字。

现在，我的 iframe 调整到它的内容大小，这正是我想要的，而且，我的图像大小不尽相同，所以当它们加载到 iframe 时，它​​们会将文本向下推。 到目前为止一切顺利。

问题是，如果我加载一个高度为 600 像素的图像，然后加载一个高度为 200 像素的图像，下面的文本将停留在 600 像素图像插入它的位置。

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

帮忙吗？

Answer 1

我用jQuery1.10.2 为您写了这个，这将根据您的 iframe 宽度动态设置文本的宽度。
首先，将 jQuery 添加到您的页面；

<script type="text/javascript" src="../jQuery/jquery-1.10.2.min.js"></script>

然后给出你的 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>