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>

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>

• javascript
• jquery
• html
• fancybox
• modal-window

• the fancy box is working, its a problem with ur url :) when do u call the openIframeLink() you only need fancy box once btw (i think) – Val Commented Feb 23, 2011 at 12:57

4 Answers 4

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

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.

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

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