Question

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

知道为什么吗？

Answer 1

如何修复.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 2

$('.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 3

刚刚解决了这个问题，最终找到了一个对我有用的修复方法。就我而言，我有一个看起来像这样的链接：

<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”而不是“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') });
    }
});

向锚点添加一个类，表明此代码已经运行 - 并在将来检查该类。这可能是数据属性，元素本身的属性，另一个属性等。我只是喜欢这个实例中的类。

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

Answer 4

对我来说，Colorbox在第一次点击时将两个iframe加载到一个框中，页面上没有其他实例。我发现只需更新到最新版本的jQuery，Colorbox就解决了这个问题。

Answer 5

我遇到了类似的问题，但它正在我正在向前和向后滑动面板的页面上加载2个iframe - 在面板的最后一个“页面”上，我会在Colorbox中打开一个iframe。如果用户导航回上一页然后返回到最后一个面板，则iframe将在Colorbox中显示两次。请注意，用户实际上永远不会将他们加载的HTML页面留在内存中，只是在用户进行时使用Javascript / CSS来显示/隐藏面板的不同部分。

我的问题我缩小到使用.load（）函数通过jQuery进行的一些AJAX问题 - 它发射了两次，而回调函数是打开Colorbox的地方。通过修复.load（）来防止它被触发两次，它消除了我在Colorbox中显示的双iframe的问题。

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

我希望这可以帮助您解释为什么您的代码无法正常运行，但随时可以发布您遇到问题的代码。我没有在链接上直接看到彩盒链接，因此无法看到这是否是一个问题。

Answer 6

我遇到了同样的问题;结果与我使用.live（）有关，从我网站的另一部分继承，其中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 = "<a href=\"iframed-page.php\">Open</a>";
            $("#link-parent-div").html(linkHTML);
            return false;
        }
    });
    return false;
});

加载2个iframe的jQuery colorbox

6 个答案: