我尝试在点击链接后使用 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>
最佳答案
您正在使用 fancyBox v3，但您使用的语法似乎来自以前的版本。这是它现在的工作方式:
$('a#link1').click(function (e) {
$.fancybox.open({
src : 'pagetest.html',
type : 'iframe'
});
return false;
});
关于javascript - FancyBox 3 在链接点击时加载 iframe 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49242667/