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

Question

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

我的彩盒功能：

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

谢谢

Answer 1

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

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

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

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

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

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

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