jQuery colorbox加载2内联框架

Question

我有一个链接，似乎是启动双色框元素到iframe（或者更确切地说2个iframe到框中）。

Here is the demo site.

任何想法，为什么？

Answer 1

我有一个类似的问题，但它装载2个iframe网页上我在那里滑动板前进和后退 - 面板的最后一个“页”上，我就开在彩盒iframe中。如果用户导航回到上一页然后返回到最后一个面板，则iframe会在Colorbox中显示两次。请注意，用户从不真正离开他们已经加载到内存中的HTML页面，它只是使用JavaScript/CSS来随着用户进展显示/隐藏面板的不同部分。

我的问题，我缩小到一个问题与一些AJAX我用的.load（）函数通过jQuery的做 - 这是射击两次，回调函数是在彩盒被打开了。通过修复.load（）以防止它触发两次，它消除了Colorbox中显示的双内部框架的问题。

现在...至于为什么Colorbox会显示两次iframe，仍然有点模糊，但我的猜测没有做很多调查Colorbox代码，是iframe对象被追加到colorbox两次，每次调用一次Colorbox，而不是检查第二次调用时iframe是否已经存在，或者只是替换它。我没有机会回过头去探索Colorbox代码，看看它是故意的还是错误的。

我希望可以帮助你破译为什么你的代码是不是工作，而是随意张贴一些，你有麻烦的代码。我没有看到链接上的链接，所以无法看到这是否是一个问题。

Answer 2

如何解决.load（）？

我有同样的问题，我发现这里的解决方案 http://groups.google.com/group/colorbox/browse_thread/thread/2f7ef7464c88f4a1/8344b1d15ca5a92b?lnk=raot

解决办法是设置格式为： onclick="$.fn.colorbox({href:'/someurl.html', open:true}); return false;"

Answer 3

我有同样的问题;结果与我使用.live（）相关，从我网站的另一部分继承，cb链接是一些ajax生成内容的一部分，因为这将是但目前不是。在本例中，cb第一次正确加载，但在第二次和随后打开时加载了两次iframed内容。

我尝试了一堆东西，包括打开颜色框，没有运气之前明确重置链接的href属性。然而，封闭在一个div中的cb-opening链接，并在onClosed回调中替换该div的html的技巧。当不使用.live（）时，cb可以正常工作，不需要onClosed回调。

$('.open-colorbox').live('click', function(e) { 
    e.preventDefault(); 
    $(this).colorbox({ 
     overlayClose:false, 
     returnFocus:false, 
     iframe:true, 
     open:true, 
     preloading: false, 
     onClosed:function(){ 
      $("#link-parent-div").html(""); 
      var linkHTML = "<a href=\"iframed-page.php\">Open</a>"; 
      $("#link-parent-div").html(linkHTML); 
      return false; 
     } 
    }); 
    return false; 
}); 

Answer 4

$('.example7').live('click', function(e) { 
    e.preventDefault(); 
    $(this).colorbox({ 
     width:"1160px", 
     height:"100%", 
     iframe:true, 
     scrolling:false, 
     open:true, 
     onCleanup:function(){ 
      $.colorbox.remove(); 
     }, 
     onClosed:function(){ 
      $.colorbox.init(); 
     }, 
}); 
return false; 
}); 

Answer 5

对我来说，彩盒文件中加载两个I帧为先点击一个框，页面上没有其他实例。我发现只是更新到最新版本的jQuery和Colorbox解决了这个问题。

Answer 6

刚打这个问题了一会儿，最终发现，为我工作的修复。 就我而言，我有一个看起来像这样的链接：

<li> 
    <a class="lightbox-lazy-iframe" data-colorbox-width="600" data-colorbox-height="600" href="PicklistEditEventTypes.aspx">Event Types</a> 
</li> 

和JavaScript来处理点击如下：

jQuery(document).on('click', 'a.lightbox-lazy-iframe', function (e) { 
    e.preventDefault(); 
    jQuery(this).colorbox({ open: true, iframe: true, width: jQuery(this).attr('data-colorbox-width'), height: jQuery(this).attr('data-colorbox-height') }); 
    return false; 
}); 

症状是第一次点击运行良好，但随后的点击会产生彩盒中有多个iFrame，内容重复。 我尝试以下解决方案：

• 升级颜色框
• 更改为“on”，而不是“活”（样品上方显示了，这种变化后）
• 升级的jQuery
• 返回假的处理程序（如上所示）
• onclick =“return false;”链接
• 删除的iFrame自己调用颜色框

最后之前，我调试其中颜色框是对的iFrame调用的createElement线和检查调用堆栈 - 这表明我，这是颜色框的自己点击拦截我的点击的处理程序 - 以及我的委托处理程序。看起来，当对colorbox进行调用时，针对锚标签添加了点击处理程序。这意味着，在后续点击，colorbox处理链接点击自身下次打开iFrame，并且您不需要委托调用。

如果它是新的锚标记，例如你刚刚创建了一个，然后colorbox自己的处理程序没有附加到该链接，并且需要委托事件处理程序。

我的解决方案如下：

jQuery(document).on('click', 'a.lightbox-lazy-iframe', function(e) { 
    var $this = jQuery(this); 
    if (!$this.hasClass("colorbox-initialized")) { 
     e.preventDefault(); 
     $this.addClass("colorbox-initialized").colorbox({ open: true, iframe: true, width: jQuery(this).attr('data-colorbox-width'), height: jQuery(this).attr('data-colorbox-height') }); 
    } 
}); 

添加一个类来表示已运行这段代码锚 - 和检查，在未来的类。这可能是一个数据属性，元素本身的属性，另一个属性等。我只是喜欢在这种情况下的类。

这个问题基本上归结为锚点标记上的两个点击处理程序，但很难精确地确定这是从哪里来的，因为colorbox添加它自己的处理程序并不明显。这可能是任何锚标记的基本行为，但是我认为如果打开它，则不应该添加：设置为true。