花式盒子没有第二次打开 iFrame答案

【问题标题】：Fancy box not opening iFrame second time花式盒子没有第二次打开 iFrame
【发布时间】：2011-07-02 17:51:24
【问题描述】：

第一篇文章 - 你好！我使用 fancybox (Fancybox homepage) 来显示模态窗口。我正在尝试在此 div 内显示一个带有 iFrame 的隐藏 div。效果很好。第二次点击链接时，它不会加载 iFrame（不是 404 错误，只是 iFrame 中没有内容）。有人可以帮忙吗？

重要的部分：

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

还有 HTML：

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

【问题讨论】：

花哨的盒子正在工作，它的网址有问题:) 你什么时候打电话给openIframeLink() 你只需要花哨的盒子一次顺便说一句（我认为）

标签： javascript jquery html fancybox modal-window

【解决方案1】：

遇到了同样的问题。根据 Frode 的评估，它正在剥离 src 属性，我在我的 fancybox 调用中添加了“onClosed”回调，并且能够将其重新添加：

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

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

【讨论】：

【解决方案2】：

看起来fancybox 从DOM 中提取iframe 元素并将其放入它自己的容器中。然后，当您关闭花式框时，它会尝试将其插入到原来的位置 - 但会设法松开 src 属性值。

fancybox 家伙认可的打开 iframe 的方法似乎如下。

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

绕过它的一种方法是克隆 iframe 元素，即

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

显然不理想。我很想听到更熟悉的人插话。

【讨论】：

嗨！太感谢了。它并没有完全达到我想要的效果（可能是我的错），但是您向我展示了足以解决问题的内容。 ` function openIframeLink() { /* 在 fancybox 丢失之前获取 src*/ theSrc = $("#data").attr('src'); $.fancybox({ 'type' : 'inline', 'href' : '#data', onClosed : function(){ $('#data').attr('src', theSrc); } }); };` -- 非常感谢！

【解决方案3】：

Fancybox 丢失了 src 属性。这是我一直在使用的解决方法

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

【讨论】：

【解决方案4】：

这是我在事先不知道元素的情况下恢复 src 属性的方法。

可能会帮助某人..

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

【讨论】：