Question

我尝试在链接点击后使用fancybox 3加载iframe。

如果我点击链接号码2，内联添加了fancybox，则会显示iframe。

如果我点击通过JavaScript添加fancybox的链接1，它会显示弹出页面不可用。

你能帮我理解为什么吗？

由于

以下是代码：

<!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在链接上加载iframe点击不起作用

1 个答案: