fancybox无法加载外部URL

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）加载包含纯数据的文件，或者使用ajax加载时使用PHP之类的预处理器返回正确的内容

Answer 2

我最终没有使用js加载fancybox内容，而是将其设置在主html文件中，然后从那里调用fancybox。 然后我一切正常。

fancybox无法加载外部URL

问题描述

2 个解决方案

解决方案1
0 2018-04-18 05:27:00

解决方案2
0 2018-05-12 22:08:00

fancybox无法加载外部URL

问题描述

2 个解决方案

解决方案1 0 2018-04-18 05:27:00

解决方案2 0 2018-05-12 22:08:00

解决方案1
0 2018-04-18 05:27:00

解决方案2
0 2018-05-12 22:08:00