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

【问题标题】：How to make the content of a page readjust to iframe size如何使页面内容重新调整为 iframe 大小
【发布时间】：2013-12-07 21:55:41
【问题描述】：

这是我在这里的第一个问题，所以请多多包涵。

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

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

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

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

帮助？

【问题讨论】：

你能显示现场版本或在 jsfiddle 上重新创建它吗？
如果你在 jsbin.com 或 jsfiddle（我更喜欢 jsbin）上做一个演示，我可能会提供帮助。本站：placehold.it将为您提供图片占位符。
这是 jsfidle，虽然我似乎无法自动调整 iframe 的大小...jsfiddle@Shomz
这是 jsfiddle，虽然我似乎无法让 iframe 的自动调整大小起作用... [jsfiddle]jsfiddle.net/e5TTG@m59

标签： javascript jquery html css iframe

【解决方案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>

【讨论】：

问题是我确实需要动态设置它。我需要文本始终位于 iframe 的正下方，无论它继承什么大小
这是您想要的文本吗：José Amaro Disciplina: Design de Comunicação I Data:Abril de 2013 Impressão: Offset
不...但感谢您的回复！我明天需要交作业，所以我没有太多时间去探索，但非常感谢你的帮助，很抱歉给你带来麻烦。 @kiyarash

【解决方案2】：

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>

【讨论】：