jQuery和Colorbox:如何自动设置iframe颜色框的高度和宽度 [英] jQuery and Colorbox: How to automatically set the height and width of an iframe colorbox

问题描述

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

I downloaded last version of colorbox jquery plugin. now i set true colorbox for iframe and inline. my problem colorbox(lightbox) not set auto height / width form external page. how to fix this ? There is a way for this?

我的颜色框功能:

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

谢谢

推荐答案

由于colorbox不知道iframe中的内容，因此自动调整大小无法按您期望的方式工作.

Because colorbox won't know what's inside the iframe, auto resize cannot work the way you expect.

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

I do it like that: set a default width + height when opening colorbox with these options:

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

选择一个尺寸，使其最适合您的内容:colorbox将打开并将iframe加载到此框中. 在iframe的html正文末尾，放置以下小脚本，该脚本可在iframe中调整颜色框的大小:

Select a size, which makes the most sense for your content: colorbox will open and load the iframe into this box. At the end of the iframe's html body, place this little script, which resizes the colorbox from within the iframe:

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

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

For the second script to work, jQuery must be loaded inside the iframe. Otherwise you have to use native JavaScript to do this task.

并确保该iframe中的所有图像均已设置宽度/高度或已完全加载.否则，innerWidth/innerHeight将给出错误的值.

And make sure, all images inside that iframe have a width/height set or have fully loaded. Otherwise innerWidth/innerHeight will give incorrect values.

这篇关于jQuery和Colorbox:如何自动设置iframe颜色框的高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！