加载2个iframe的jQuery colorbox [英] jQuery colorbox loading 2 iframes

问题描述

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

I have a link that seems to be launching double colorbox element into the iframe (or rather 2 iframes into the box).

这是演示网站。

知道为什么吗？

推荐答案

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

Just fought this issue for a while, eventually found a fix that worked for me. In my case, I had a link that looked like this:

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

和用于处理点击的javascript如下：

and javascript to handle the click as follows:

 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，内容重复。
我尝试了以下解决方案：

Symptoms were the first click worked fine, but subsequent clicks resulted in more than one iFrame in the colorbox, with duplicate content. I tried the following solutions:

• 升级颜色盒


• 更改为on而不是live（上面的示例显示在此更改之后）


• 升级jQuery


• 在处理程序中返回false（如上所示）


• onclick =return false;链接


• 在调用colorbox之前自己删除iFrame

• Upgrade colorbox
• Change to "on" instead of "live" (sample above shows on, after this change)
• Upgrade jQuery
• Return false in the handler (shown above)
• onclick="return false;" on the link
• Deleting the iFrame myself before invoking colorbox

最后，我调试了该行colorbox在iFrame上调用createElement并检查调用堆栈 - 这向我展示了彩盒的自己的点击处理程序，它拦截了我的点击 - 以及我的委托处理程序。似乎当调用colorbox时，对着锚标记，会添加一个单击处理程序。这意味着在后续点击时，colorbox会处理链接点击本身以便下次打开iFrame，而您不需要委托调用。

Eventually, I debugged the line where colorbox was calling createElement on the iFrame and examined the call stack - this showed me that it was colorbox's own click handler that was intercepting my clicks - as well as my delegate handler. It seems that when the call is made to colorbox, against an anchor tag, a click handler is added. This means that on subsequent clicks, colorbox handles the link click itself to open the iFrame next time, and you don't need the delegate call.

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

If it's a new anchor tag, e.g. one you've just created, then colorbox's own handler is not attached to that link yet and the delegate event handler is required.

我的解决方案如下：

    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') });
    }
});

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

Add a class to the anchor that indicates this code has already been run - and check for that class in the future. This could be a data attribute, property on the element itself, another attribute, etc.. I just prefer classes in this instance.

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

The problem essentially boils down to two click handlers on the anchor tag, but it was difficult to pinpoint exactly where this was coming from because it wasn't obvious that colorbox was adding it's own handler. This is probably the underlying behaviour for any anchor tag, but I figure it shouldn't be added if open:true is set.

这篇关于加载2个iframe的jQuery colorbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！