jQuery 和 Colorbox：如何自动设置 iframe 颜色框的高度和宽度答案

【问题标题】：jQuery and Colorbox: How to automatically set the height and width of an iframe colorboxjQuery 和 Colorbox：如何自动设置 iframe 颜色框的高度和宽度
【发布时间】：2012-04-08 22:03:10
【问题描述】：

我下载了colorbox jquery plugin 的最新版本。现在我为 iframe 和内联设置了真正的颜色框。我的问题 colorbox(lightbox) 没有设置外部页面的自动高度/宽度。如何解决这个问题？有办法吗？

我的彩盒功能：

<script>
$(document).ready(function(){
 $(".iframe").colorbox({inline:true,iframe:true});
</script>

谢谢

【问题讨论】：

标签： jquery colorbox

【解决方案1】：

因为 colorbox 不知道 iframe 中的内容，所以自动调整大小无法按您预期的方式工作。

我是这样做的：使用这些选项打开颜色框时设置默认宽度+高度：

{ iframe: true, innerWidth: 430, innerHeight: 370, scrolling: false, ... }

选择对您的内容最有意义的尺寸：colorbox 将打开并将 iframe 加载到此框中。 在 iframe 的 html 正文的末尾，放置这个小脚本，它会在 iframe 内调整颜色框的大小：

$(function(){
    parent.$.colorbox.resize({
        innerWidth:$('body').width(),
        innerHeight:$('body').height()
    });
});

要使第二个脚本正常工作，必须在 iframe 中加载 jQuery。否则你必须使用原生 JavaScript 来完成这个任务。

并确保该 iframe 内的所有图像都设置了宽度/高度或已完全加载。否则innerWidth/innerHeight 会给出不正确的值。

【讨论】：

这是一个很好的脚本。另外，请理解，从技术上讲，问题不在于 ColorBox 不知道 iframe 中的内容，而是浏览器在内容通过网络进入 DOM 之前不知道。
终于有人找到了可行的解决方案！谢谢！
不幸的是，这仅在您可以修改 iFrame 中内容的来源时才有效。如果您正在加载您无法控制的内容，您唯一的选择似乎是手动设置高度/宽度。