Javascript colorbox在colorbox.resize上重新加载iframe内容时出现问题
我使用colorbox(jquery插件)来显示一个多步骤的注册过程。我在“iframe”模式下使用colorbox 由于不同步骤的内容具有不同的高度,我希望colorbox在加载新步骤时自动调整自身大小 我在iframe内容中使用以下代码(仅在文档末尾附近的脚本标记中): 在此之前,我尝试了一个更简单的版本:Javascript colorbox在colorbox.resize上重新加载iframe内容时出现问题,javascript,jquery,iframe,colorbox,Javascript,Jquery,Iframe,Colorbox,我使用colorbox(jquery插件)来显示一个多步骤的注册过程。我在“iframe”模式下使用colorbox 由于不同步骤的内容具有不同的高度,我希望colorbox在加载新步骤时自动调整自身大小 我在iframe内容中使用以下代码(仅在文档末尾附近的脚本标记中): 在此之前,我尝试了一个更简单的版本: parent.$.colorbox.resize(); 但在这两种情况下,我最终都得到了一个似乎是无限循环的结果:iframe的内容被无休止地重新加载,并且从未真正显示过(我有时可以看
parent.$.colorbox.resize();
但在这两种情况下,我最终都得到了一个似乎是无限循环的结果:iframe的内容被无休止地重新加载,并且从未真正显示过(我有时可以看到它闪烁)。
iframe在这个过程中(在第一个循环期间)调整了大小,因此它似乎部分工作。然而,新的尺寸对于预期的内容来说似乎太小了,所以我真的不知道
你知道为什么这样不行,怎么解决吗
更新:
如果我将上述脚本(简单版本)放在第二步而不是第一步,我将避免无限循环,但是当我单击转到第二步时,第一步实际上是加载的,而不是第二步。如果我将此脚本放在第三个步骤上,情况也是如此:第一个步骤将被加载。
因此,在执行其“调整大小”功能时,colorbox似乎从一开始就重新启动了它?…我在这里找到了一个解决方案: 将此添加到colorbox.js(colorbox v1.3.17.2,在R533上的publicMethod.resize之前): 我在iframe的页面打开部分添加了以下内容:
$(document).ready(function (){
$(window).bind('load', function () {
var frameWidth = $(document).width();
var frameHeight = $(document).height();
parent.$.fn.colorbox.myResize(frameWidth, frameHeight);
});
});
为了绑定colorbox函数,我使用了以下选项:
$('.item').colorbox({
transition: 'none',
iframe : true,
scrolling : false
});
如果你设置了initialWidth和initialHeight,而不是height和width,并且没有调用resize,会发生什么?顺便说一句,你还在寻找答案吗?@chim:我有点放弃了,但我仍然很想解决这个问题。我没有想过用initialHeight代替height。我明天会试试。经过几次测试,问题似乎与我在iframe模式下使用colorbox有关。在此模式下,initialWidth/initialHeigh和maxWidth/MaxHeigh似乎都不能正常工作(它们总是打开一个大小接近于零的iframe)。所以我的猜测是,调整大小功能也不能在iframe模式下工作。这似乎可以工作,非常感谢!不过有一个问题:它似乎只在弹出窗口的内容比以前的内容大时才调整弹出窗口的大小,而不是在它小时(在这种情况下,它不会调整大小)。知道为什么会这样吗?我不太清楚,抱歉。因为我在制作彩盒的项目需要做很多修改,所以我最终决定自己从头开始制作一个灯盒。是的,我明白你的意思。我已经为这个问题放弃了自己(出于各种原因)。无论如何谢谢你的帮助!
publicMethod.myResize = function (iW, iH) {
if (!open) {
return;
}
if (settings.scrolling) {
return;
}
var speed = settings.transition === "none" ? 0 : settings.speed;
$window.unbind('resize.' + prefix);
settings.w = iW;
settings.h = iH;
$loaded.css({
width: settings.w,
height: settings.h
});
publicMethod.position(speed);
};
$(document).ready(function (){
$(window).bind('load', function () {
var frameWidth = $(document).width();
var frameHeight = $(document).height();
parent.$.fn.colorbox.myResize(frameWidth, frameHeight);
});
});
$('.item').colorbox({
transition: 'none',
iframe : true,
scrolling : false
});