1

Colorbox 提供了将 iframe 作为其内容加载的特定方法，当这种颜色框弹出窗口关闭时，父页面根本不会重新加载或刷新。

但是，在我的用例中，我需要在打开的颜色框内附加/添加自定义 iframe 元素，而不交换颜色框内容。已经打开的颜色框内容纯粹是内联 HTML - 不存在任何 iframe。这个新的自定义 iframe 的内容是一个 ajaxified 评论表单，只有在作为自己的页面加载时才有效 - 或者在完全限定的 iframe 元素中。

iframe当单击颜色框内容中的链接时，我的函数会添加以下内容：

$('#cboxLoadedContent').append('<IFRAME frameborder="0" src="'+url+'" id="loadednode">');

现在我可以让它工作没有问题 -IFRAME被插入并对其内容进行正常加载过程并完美显示所有内容。

唯一的问题是，一旦我通过使用关闭按钮或单击覆盖单击此加载的颜色框的“退出”，与退出颜色框原生 iframe 内容不同，父/首页突然重新加载！

我该如何防止这种情况发生？是什么让 colorbox-native iframe 在删除时避免页面刷新，但我添加到 colorbox 内容的 iframe 会导致父页面在删除时重新加载？

作为参考，我可以将作为 iframe 内容的页面加载为 colorbox-native iframe，退出时不会导致页面重新加载，因此无论哪种情况，问题都不在于 iframe 的内容 - 它必须be in the way colorbox 删除了 colorbox 处理的 iframe 与非 colorbox 处理的 iframe。

一些猜测：

  • 没有“name”属性或没有固定的“id”属性会导致问题吗？
  • 如果 iframe 包含在没有“src”属性的初始内联 HTML 中，但是在单击时它会获得“src”路径，这会避免这些问题吗？
  • 有没有另一种说法“在我正在查看的颜色框中加载这个 iframe 而不会删除已经存在的 HTML 内容”？

我正在使用（旧版本，因为 Drupal 6 与新版本不兼容）：

4

1 回答 1

0

解决了：

使用 colorbox 打开的初始内容是内联 HTML - 使用 colorbox 的“内联”命令（将内容从隐藏容器移动到 colorbox 内容中）。当具有此类内容的彩盒关闭时，彩盒的正常行为是将其移回其原始位置（这是一个display: nonediv 容器）——连同我手动添加到彩盒的所有 HTML。

因此，当我在插入新的 HTML 后关闭颜色框时，颜色框将所有这些内容移回页面上的隐藏容器。当您移动 iframe 时，它​​自然会重新加载其内容。（摸额头）。

因此，实际的解决方案只涉及在 colorbox 继续并将其 HTML 内容返回到其原始位置之前强制删除（）任何一开始不存在的 iframe：

$(document).bind('cbox_cleanup', function(){
    $('iframe').remove(); // Remove all iframes, or else colorbox inline moves them to original location with HTML content, triggering another load on it
    console.log('Done killing iFrame... moving contents back.');

我敢肯定，用例晦涩难懂，但希望它可以帮助那里的人混合 iframe 和内联颜色框内容；）

于 2013-03-20T18:44:35.817 回答