非常简单的test.html页面:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
/* This is basic - uses default settings */
$("a.iframe").fancybox();
});
</script>
</head>
<body>
<a class="iframe" href="http://www.google.be/">This goes to iframe</a>
</body>
</html>
然而,fancybox只是不起作用...对js文件和css的引用是正确的.JQuery正常运行.但是单击该链接只是一个普通的链接.即:我重定向到google.be.仅供参考:这不仅仅是谷歌,而是我放在那里的每一个网址.我在这里错过了什么？
imj*_*red 39
我成功地将锚上的类更改为fancybox fancybox.iframe.
<a class="fancybox fancybox.iframe" href="http://www.google.be/">This goes to iframe</a>
<script type="text/javascript">
$(document).ready(function() {
$('a.fancybox').fancybox();
});
</script>
不知道为什么会这样,但它对我有用.
编辑:还需要更新到最新版本的jQuery
JFK*_*JFK 14
正如解释因为@imjared说:
不知道为什么会这样,但它对我有用.
由于您尝试打开外部页面,因此逻辑步骤是在iframe模式下打开fancybox ,但是fancybox无法知道它必须将内容包装在iframe标记中.
有三种方法可以告诉fancybox这样做:
1).添加type: "iframe"到您的自定义脚本,如:
$('a.fancybox').fancybox({
type: "iframe"
});
2).将属性添加data-fancybox-type="iframe"到<a>锚标记,如:
<a class="iframe" href="http://www.google.be/" data-fancybox-type="iframe">This goes to iframe</a>
它需要HTML5 DOCTYPE.
3).将特殊类添加fancybox.iframe到<a>锚标记中,如接受的答案中所示.
fancybox脚本能够评估上面的任何状态,但你应该选择至少其中一个以使其工作(你可以使用多个或完全使用它可以工作,但它是多余的)
注意:这仅适用于fancybox v2.x +(...并且需要jQuery v1.6或更高版本)
顺便说一句:由于安全限制,某些网站无法在谷歌或Facebookiframe等网站上打开.您应始终考虑使用iframe和ajax内容的Same origin策略.
| 归档时间： |
|
| 查看次数： |
67056 次 |
| 最近记录： |