Question

第一篇文章 - 你好！我使用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>

Answer 1

有同样的问题。基于Frode的评估它正在剥离src属性，我在我的fancybox调用上添加了'onClosed'回调，并且能够将其添加回来：

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

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

Answer 2

看起来fancybox从DOM中提取iframe元素并将其放入自己的容器中。然后，当您关闭fancybox时，它会尝试将其插回原来的位置 - 但设法会丢失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()} );
}

显然不理想..我喜欢听到更熟悉的人。

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

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

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

4 个答案: