Question

我想在文档准备好时加载一个fancybox，但是在特定的DIV中，fancybox的内容将来自不同的页面，显示为iFrame。这就是我目前所拥有的：

$(document).ready(function () {     
     $.fancybox({
          'href'            : "#div",
          'content'         : "content.jsp",
          'type'            : "iframe",
     });
});

HTML：

<div id="div">
</div>

什么都没有加载。

Answer 1

试试这个：

$(document).ready(function () {     
     $("#div").fancybox({
          'href'            : 'content.jsp',
          'type'            : 'iframe'
     });
});

HTML

<div id="div">
    Click Here
</div>

JsFiddle

Answer 2

您无法将div的内容显示为 iframe ，但内嵌。

因此，您可以直接在fancybox中打开（以编程方式）content.jsp文件，如iframe所示：

jQuery(document).ready(function ($) {
    $.fancybox({
        href: "content.jsp",
        type: "iframe"
    });
}); // ready

或者将content.jsp文件的内容加载到div#div容器中，然后在fancybox中显示 inline 内容，如：

jQuery(document).ready(function ($) {
    $("#div").load("content.jsp", function () {        
            $.fancybox($(this), {
                // API options
                type: "inline"
            });
    });
}); // ready

页面加载时的jQuery Fancybox，iFrame中的内容

2 个答案: