彩盒 iframe 调整大小答案

【问题标题】：Colorbox iframe resize彩盒 iframe 调整大小
【发布时间】：2012-02-21 11:55:18
【问题描述】：

我查看了许多对类似问题的回复，但找不到任何有效的方法。我是 javascript 新手，但已经足够让我的结果显示在 iframe 中，但是当我尝试建议的代码时：

$.colorbox({ ... url, iframe true, etc

onComplete : function() { 
        $.fn.colorbox.resize(innerHeight);
        }

窗口大小调整为 150 像素高。不管页面的 html 中有什么。理想情况下，它会根据搜索结果的大小打开，然后我可以在每次运行新搜索时调用它，但我发现没有任何 colorbox.resize() 的变体可以参考。纳达。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript iframe resize colorbox

【解决方案1】：

如果您想根据 Iframe 的内容调整大小，那么您调整大小的代码应该在 Iframe 内容内。因为据我所知，只有 iframe 知道它包含什么内容，而不是加载它的父窗口。在您的 iframe 内容中，将此代码放在 head 部分中

<script type="text/javascript">
    function Resize_Box(){
        var x = $('body').width();
        var y = $('body').height();
        parent.$.fn.colorbox.resize({
            innerWidth: x,
            innerHeight: y
        });
    }

    $(document).ready(function(){
        Resize_Box();
    });
</script>

当 Iframe 完全加载后，此代码将被执行并且您的 Colorbox 窗口将被调整大小。（确保此代码仅在您为 Parent 和 Iframe 使用相同域时才有效）

【讨论】：

【解决方案2】：

你试过resize() 没有任何争论吗？它应该使用自己的自动计算来调整大小。不过你也可以试试

$.fn.colorbox.resize({innerHeight:innerHeight});

查看link 了解更多信息。

【讨论】：

这会根据浏览器窗口的大小而不是内容来调整窗口的大小。这是朝着正确方向迈出的一步，但不是很大。不过谢谢，你还有其他想法吗？ -马特