Fancy box not opening iFrame second time

Question

first post - Hello! I use fancybox (Fancybox homepage) to display modal windows. I'm trying to display a hidden div with an iFrame inside of this div. Works great. The second time you click the link, it doesn't load the iFrame (not a 404 error, just there is no content in the iFrame). Can anyone help?

The important bits:

<script type="text/javascript">
function openIframeLink() {
    $.fancybox({
        'type'          : 'inline',
        'href'          : '#data'
    });
};
</script>

And the HTML:

<div id="hiddenElement">
    <iframe id="data" src="frames/frame4.php" width="100%" height="300"></iframe>
</div>

Answer 1

It looks like fancybox extracts the iframe element from the DOM and puts it into it's own container. Then, when you close the fancybox, it attempts to insert it back where it originally was - but manages to loose the src attribute value.

The fancybox guy's approved method of opening an iframe seems to be the following.

<a id="mylink" class="iframe" href="frames/frame4.php">mylink</a>
<script type="text/javascript">
    $("#mylink").fancybox();
</script>

One way to circumvent it, is to clone the iframe element, i.e.

function openIframeLink() {
    $.fancybox( {content: $('#data').clone()} );
}

Obviously not ideal.. I'd love hear someone more familiar chime in.

Answer 2

Had this same problem. Based on Frode's assessment that it was stripping the src attribute, I added the 'onClosed' callback on my fancybox call and was able to add it back in:

jQuery('#iframe_element').fancybox({
    'onClosed': reloadIframe
});

function reloadIframe() {
    jQuery('#iframe_element').attr('src','http://example.com');
}

Answer 3

Fancybox loses the src attribute. Here is a workaround I've been using ever since

function openIframeLink() { 
    /* Grab the src before fancybox loses it */ 
    theSrc = $("#data").attr('src'); 
    $.fancybox({ 
        'type'     : 'inline', 
        'href'     : '#data', 
        onClosed     : function()
        { 
            $('#data').attr('src', theSrc); 
        } 
    }); 
};

Answer 4

This is my way of recovering the src attribute, without knowing the element beforehand.

Might help someone..

$(".fancybox.iframe").each(function(){
    var target = $($(this).attr("href"));
    var src = target.attr("src");
    $(this).fancybox({
        'type': "inline",
        'content': target,
        'onClosed': function(){
            target.attr("src", src);
        }
    });
});