加载2个iframe的jQuery colorbox
我有一个链接，似乎是将双色盒元素发送到iframe（或者更确切地说是2个iframe到框中）。
这是演示网站。
知道为什么吗？
$('.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; });
刚刚解决了这个问题，最终找到了一个对我有用的修复方法。 就我而言，我有一个看起来像这样的链接：
Event Types
和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”而不是“live”（上面的示例显示在此更改后）
- 升级jQuery
- 在处理程序中返回false（如上所示）
- onclick =“return false;” 在链接上
- 在调用colorbox之前自己删除iFrame
最后，我调试了colorbox在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。
对我来说，Colorbox在第一次点击时将两个iframe加载到一个框中，页面上没有其他实例。 我发现简单地更新到最新版本的jQuery和Colorbox解决了这个问题。
我有一个类似的问题，但它正在我正在向前和向后滑动面板的页面上加载2个iframe – 在面板的最后一个“页面”上，我会在Colorbox中打开一个iframe。 如果用户导航回上一页然后返回到最后一个面板，则iframe将在Colorbox中显示两次。 请注意，用户实际上永远不会将他们已加载的HTML页面留在内存中，只是在用户进行时使用Javascript / CSS来显示/隐藏面板的不同部分。
我的问题我缩小到一些AJAX的问题我正在通过jQuery使用.load（）函数 – 它被触发两次，而回调函数是Colorbox打开的地方。 通过修复.load（）以防止它被触发两次，它消除了我在Colorbox中显示的双iframe的问题。
现在……至于为什么Colorbox会显示iframe两次，仍然有点模糊，但我的猜测没有做很多查看Colorbox代码，是iframe对象被附加到colorbox两次，每个Colorbox一次调用，而不是检查第二次调用中是否已存在iframe或只是替换它。 我没有机会回过头来深入了解Colorbox代码，看看这是故意还是错误。
我希望这可以帮助您解释为什么您的代码无法正常工作，但随时可以发布一些您遇到问题的代码。 我没有在你的链接上直接看到彩盒链接，所以无法看到这是否是一个问题。
我遇到了同样的问题; 结果与我对.live（）的使用有关，从我网站的另一部分inheritance，其中cb链接是某些ajax生成的内容的一部分，因为这将是但目前不是。 在本例中，cb第一次正确加载，但是在第二次和随后的打开时加载了两次iframed内容。
我尝试了很多东西，包括在打开colorbox之前显式重置链接的href属性，没有运气。 然而，将cb-opening链接包含在div中并在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 = "Open"; $("#link-parent-div").html(linkHTML); return false; } }); return false; });