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

Question

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

如果我单击链接2（在其中内联添加了fancybox），则会显示iframe。

如果我单击链接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在链接上加载iframe单击不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-03-13 08:31:53

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-03-13 08:31:53

解决方案1
2 已采纳 2018-03-13 08:31:53