Question

我第一次尝试fancybox，我想从外部html文件加载内容。但是会发生什么，ajax调用最终将我的整个index.html文件加载到fancybox窗口，而不是我想看到的更小的html表加载。这是我设置的html：

                <div class="card bg-light">
                            <img class="card-img img-fluid" src="/assets/O-Ride-Entry.jpg" alt="Card image">
                            <div class="card-body">
                                <h5 class="card-title text-center" >Cadet Programs</h5>
                                <p>blah blah blah
                                </p>
                            </div>
                            <div id="cadetPgmContainer"></div>
                            <div class="card-footer bg-transparent ">
                                <a href="#" class="btn btn-primary" id="cadetPgmsCard">Learn More</a>
                            </div>
                </div> <!-- card -->

以下是用户点击“了解详情”时调用的javascript：

$('#cadetPgmsCard').click( function() {
    var href= '/static/cadetPgms.html';
    console.log('going to open fancybox with ', href);


    $.fancybox.open({
        width: 400,
        height: 400,
        autosize: true,
        href: href,
        type: 'ajax'
    });

    console.log('back from fancybox');

});

我甚至将html文件简化为：

<p>this is from cadetPgms.html</p>

但这是实际发生的事情的屏幕截图：

它将整个主页面重新加载到fancybox中。我步入调试器，在fancybox.js中调用ajax，并在选项中有正确的URL。我还能尝试什么？

...谢谢

Answer 1

看起来您正在将整个网页加载到fancybox中，并且很可能您的.html文件的负责人包含多余的标记，包括<html>，<head>等。这是不正确的。，

在这种情况下，您有两种选择：

1）使用filter选项过滤您的内容，以便只显示内容

2）加载包含普通数据的文件或使用PHP之类的预处理器在使用ajax加载时返回正确的内容

Answer 2

我最终没有使用js来加载fancybox内容，并将其设置在主html文件中，并从那里调用fancybox。然后我把一切都搞好了。

fancybox没有加载外部URL

2 个答案: