在 iframe 中打开新页面时，如何让 jQuery 颜色框调整大小？答案

【问题标题】：How to get jQuery colorbox to resize when a new page is opened in the iframe?在 iframe 中打开新页面时，如何让 jQuery 颜色框调整大小？
【发布时间】：2012-11-22 16:45:45
【问题描述】：

我已经成功地将jQuery colorbox plugin 实现到一个网络应用程序中。但是我仍然有以下问题：在 iframe 中打开新页面时，我无法让 jQuery colorbox 调整大小？

场景：

用户访问主页。
用户点击一个链接（在同一个域上），jQuery colorbox 在一个大页面上打开一个 iframe。
用户点击一个链接（在同一个域上），iframe 导航到一个较小的页面。

当 iframe 导航到较小的页面时，我需要调整颜色框的大小，但是如何调整？

到目前为止我所做的尝试：

我认为在较小页面的<head> 部分中，我可以放置一些代码来调整颜色框的大小。代码在$(document).ready() 函数内执行。

$.colorbox.resize();
$.fn.colorbox.resize();
$(".iframe").colorbox.resize();

但所有这些都不起作用。但是，如果我在 iframe 中完全加载页面后，在 Firebug 控制台中传递$.colorbox.resize(); 命令，则调整大小功能会成功执行。

很高兴知道：

我知道有很多关于如何调整颜色框大小的问题，但我没有发现任何涉及 iframe 的问题可以解决我的问题。如果您需要任何额外的代码或屏幕截图来帮助解决我的问题，尽管问。

感谢您为我指明了正确的方向。

【问题讨论】：

如果 iframe 不是来自与页面跨域限制相同的域，则不允许获取内容高度
@charlietfl 感谢您的评论，点击的所有链接都在同一个域中。
@RTB，当任何用户单击 iframe 中的链接并导航到另一个小页面时，您是否要调整颜色框的大小？
@KundanSinghChouhan 是的

标签： jquery iframe jquery-plugins resize colorbox

【解决方案1】：

我终于修好了，因为需要在父窗口中制作我自己的调整大小功能。

window.customResize = function(){ 
    $(".iframe").colorbox.resize({width:"960px", height:"675px"});
};

这说明我可以在 iframe 中调用以下命令：

window.parent.customResize();

然后它就起作用了。

【讨论】：