【问题标题】: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 中内容的来源时才有效。如果您正在加载您无法控制的内容,您唯一的选择似乎是手动设置高度/宽度。
    猜你喜欢
    • 2014-06-09
    • 2014-03-08
    • 1970-01-01
    • 2014-05-26
    • 1970-01-01
    • 2011-11-06
    • 1970-01-01
    • 2012-10-07
    • 2015-04-24
    相关资源
    最近更新 更多