首页 文章

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

提问于
浏览 次
1

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"路径，是否会避免这些问题？

  • 有没有另外一种方法可以说"load this iframe in the colorbox I am looking at without removing the HTML contents that are already there"？

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

jquery iframe append colorbox

1 回答

  • 0

    解决了：

    使用colorbox打开的初始内容是内联HTML - 使用colorbox的"inline"命令（将内容从隐藏容器移动到颜色框内容中） . 当具有此类内容的颜色框关闭时，colorbox的正常行为是将其移回其原始位置（这是一个 display: none div容器） - along with all the HTML I added to the colorbox manually .

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

    因此，实际的解决方案只是强制删除（）任何首先不存在的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和内联彩盒内容的人;）

    回复于

相关问题