FancyBox 3 在 link 上加载 iframe 单击不起作用

Question

我正在尝试在 link 单击后使用 fancybox 3 加载 iframe。

如果我点击 link 数字 2，iframe 就会出现，其中内联添加了 fancybox。

如果我点击 link 1，其中通过 JavaScript 添加了 fancybox，它会显示页面不可用的弹出窗口。

你能帮我理解为什么吗？

谢谢

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
        <script> 
            $(document).ready(function () {
                $('a#link1').click(function (e) {
                    $("a#link1").fancybox({
                        iframe: {
                            attr: {
                                href : "pagetest.html"
                            }
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <a id="link1" href="javascript:void(0);">Preview link1</a>
        <a data-fancybox data-type="iframe" data-src="pagetest.html" href="javascript:void(0);">Preview link2</a>
    </body>
</html>

pagetest.html

<HTML>

<HEAD>

<TITLE>Your Title Here</TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

<CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>

<HR>

<a href="http://somegreatsite.com">Link Name</a>

is a link to another nifty site

<H1>This is a Header</H1>

<H2>This is a Medium Header</H2>

Send me mail at <a href="mailto:support@yourcompany.com">

support@yourcompany.com</a>.

<P> This is a new paragraph!

<P> <B>This is a new paragraph!</B>

<BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>

<HR>

</BODY>

</HTML>

Answer 1

您正在使用 fancyBox v3，但您使用的语法似乎来自以前的版本。现在是这样工作的：

$('a#link1').click(function (e) {
  $.fancybox.open({
    src : 'pagetest.html',
    type : 'iframe'
  });

  return false;
});

演示 - https://codepen.io/anon/pen/aYvQBv?editors=1010

FancyBox 3 在 link 上加载 iframe 单击不起作用

FancyBox 3 load iframe on link click not working

javascript

fancybox-3