jQuery colorbox loading 2 iframes

问题

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

Here is the demo site.

Any idea why?

回答1:

How fix you the .load()?

I have the same problem and I have found the solution here http://groups.google.com/group/colorbox/browse_thread/thread/2f7ef7464c88f4a1/8344b1d15ca5a92b?lnk=raot

Solution is to set this format: onclick="$.fn.colorbox({href:'/someurl.html', open:true}); return false;"

回答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;
});

回答3:

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>

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

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:

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

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.

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.

My solution is as follows:

    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.

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.

回答4:

For me, the Colorbox loaded two iframes into one box on first click, with no other instances on the page. I found simply updating to the newest versions of jQuery and Colorbox solved the issue.

回答5:

I had a similar issue, but it was loading the 2 iframes on a page where I was sliding a panel forward and back - on the last "page" of the panel, I would open an iframe in Colorbox. If the user navigated back to the previous page and then back to the last panel, the iframe would be shown twice in Colorbox. Note that the user never actually leaves the HTML page they have loaded in memory, it was just using Javascript/CSS to show/hide different portions of the panel as the user progressed.

My issue I narrow down to an issue with some AJAX I was doing through jQuery using the .load() function - it was firing twice, and the callback function was where the Colorbox was opened. By fixing the .load() to keep it from firing twice, it eliminated my issue with the double iframes showing in Colorbox.

Now...as to why the Colorbox would show the iframe twice, still a little fuzzy, but my guess without doing a lot of looking into the Colorbox code, is that the iframe object is appended to the colorbox twice, once for each Colorbox call, rather than checked to see if the iframe already exists on the second call or just replacing it. I haven't had a chance to go back and dive into the Colorbox code to see if that is intentional or if it is a bug.

I hope that helps you decipher why your code isn't working, but feel free to post some of the code where you have the trouble. I didn't see the colorbox link straightaway on your link, so couldn't see if this was an issue or not.

回答6:

i was having the same problem; turned out to be related to my use of .live(), carried over from another part of my site where the cb link was part of some ajax-generated content, as this will be but currently isn't. in the present case the cb loaded correctly the first time, but loaded the iframed content twice on second and subsequent opens.

i tried a bunch of things, including explicitly resetting the href property of the link before opening colorbox, with no luck. however, enclosing the cb-opening link in a div and replacing the html for that div in the onClosed callback did the trick. when not using .live() cb works fine without the onClosed callback.

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

来源：https://stackoverflow.com/questions/4434722/jquery-colorbox-loading-2-iframes

标签

jquery

colorbox