Question

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

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

我的功能在点击彩盒内容中的链接时添加下面的iframe：

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

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

唯一的问题是，只要我通过使用关闭按钮或点击叠加层点击此“加载”颜色框的“out”，就像退出colorbox-native iframe内容一样，父/顶部页面突然重新加载！

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

作为参考，我可以将作为iframe内容的页面加载为colorbox-native iframe，退出时不会导致页面重新加载，因此问题不是任何一种情况下iframe的内容 - 必须使用colorbox删除彩盒处理的iframe与非彩盒处理的iframe的方式。

一些猜测：

没有“name”属性或具有固定的“id”属性会导致问题吗？
如果iframe包含在没有“src”属性的初始内联HTML中，但是在点击时它会获得“src”路径，这会避免这些问题吗？
有没有其他方法可以说“在我删除已经存在的HTML内容的情况下，在我正在查看的颜色框中加载此iframe”？

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

jQuery 1.3.2
Colorbox v1.3.18.1（http://www.jacklmoore.com/colorbox/）

Answer 1

解决：

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

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

因此，实际的解决方案只是强制删除（）任何首先不存在的iframe，然后colorbox继续并将其HTML内容返回到原始位置：

$(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和内联彩盒内容的人;）

Colorbox - 在彩盒内容中删除自定义iframe时阻止重新加载父页面？

1 个答案: