Colorbox - 在颜色框内容中删除自定义 iframe 时防止父页面重新加载？

Posted 2023-05-09

【中文标题】Colorbox - 在颜色框内容中删除自定义 iframe 时防止父页面重新加载？

【英文标题】：Colorbox - Prevent parent page reload when removing custom iframe within colorbox content?

【发布时间】：2013-03-09 21:51:28

【问题描述】：

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 的内容- 它必须是 colorbox 删除 colorbox 处理的 iframe 与非 colorbox 处理的 iframe 的方式。

一些猜测：

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

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

jQuery 1.3.2 彩盒 v1.3.18.1 (http://www.jacklmoore.com/colorbox/)

【参考方案1】：

已解决：

使用 colorbox 打开的初始内容是内联 HTML - 使用 colorbox 的“内联”命令（将内容从隐藏容器移动到 colorbox 内容中）。当具有此类内容的颜色框关闭时，颜色框的正常行为是将其移回其原始位置（这是一个 display: none div 容器） - 连同我手动添加到颜色框的所有 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 和内联颜色框内容的人；）

【讨论】：

它是使用 $.bind() 方法自动调用的。根据 Colorbox 文档，cbox_cleanup“在关闭方法开始时触发。”因此，无论何时触发“关闭”操作（通过单击关闭按钮、ESC 键或覆盖单击），我上面的自定义功能都会触发，在完成例行清理过程之前删除 iframe（这涉及移动内联内容回到主页）。