jQuery Fancybox：iframe 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13868132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancybox: iframe doesn't work
提问by Matthias
Very simple test.html page:
非常简单的 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>
Yet, fancybox just won't work... The references to the js file and css are correct. JQuery functions normally. But clicking the link acts just a normal link. Ie: I get redirect to google.be. FYI: It's not just with google, it's with every single URL I put there. What am I missing here?
然而，fancybox 是行不通的……对 js 文件和 css 的引用是正确的。JQuery 功能正常。但是点击链接只是一个普通的链接。即：我被重定向到 google.be。仅供参考：不仅仅是谷歌，我放在那里的每一个 URL 都是如此。我在这里缺少什么？
回答by imjared
I had success changing the classon the anchor to fancybox fancybox.iframe.
我成功地将锚上的课程更改为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>
No idea why this is the case but it worked for me.
不知道为什么会这样，但它对我有用。
Edit: also need to update to a recent version of jQuery
编辑：还需要更新到最新版本的 jQuery
回答by JFK
Just as an explanation because @imjared said :
只是作为解释，因为@imjared 说：
No idea why this is the case but it worked for me.
不知道为什么会这样，但它对我有用。
Since you are trying to open an external page, the logical step is to open fancybox in iframemode, however fancybox has no means to know that it has to wrap the content in an iframetag.
由于您正在尝试打开外部页面，因此合乎逻辑的步骤是在iframe模式下打开fancybox ，但是fancybox 无法知道它必须将内容包装在iframe标签中。
There are three ways to tell fancybox to do it :
有三种方法可以告诉fancybox这样做：
1). Add type: "iframe"to your custom script like :
1）。添加type: "iframe"到您的自定义脚本，如：
$('a.fancybox').fancybox({
type: "iframe"
});
2). Add the attribute data-fancybox-type="iframe"to your <a>anchor tag like :
2）。将属性添加data-fancybox-type="iframe"到您的<a>锚标记，如：
<a class="iframe" href="http://www.google.be/" data-fancybox-type="iframe">This goes to iframe</a>
It requires HTML5 DOCTYPEthough.
DOCTYPE不过它需要 HTML5 。
3). Add the special class fancybox.iframeto your <a>anchor tag as in the accepted answer.
3）。如接受的答案一样，将特殊类添加fancybox.iframe到您的<a>锚标记中。
The fancybox script is able to evaluate any of the states above but you should choose at least one of them to make it work (you could use more than one or altogether and it will work, but it's redundant)
Fancybox 脚本能够评估上述任何状态，但您应该至少选择其中一个来使其工作（您可以使用多个或全部使用它，它会工作，但它是多余的）
NOTE: this is valid for fancybox v2.x+ only (... and requires jQuery v1.6 or later)
注意：这仅对fancybox v2.x+ 有效（...并且需要jQuery v1.6 或更高版本）
BTW : Due to security restrictions, some websites cannot be opened in an iframe, like googleor facebookfor instance. You should always consider the Same origin policyworking with iframes and ajax content.
顺便说一句：由于安全限制，某些网站无法在 . 中打开iframe，例如google或facebook。您应该始终考虑使用 iframe 和 ajax 内容的同源策略。
回答by Ehsan
This worked for me thanks to @JFK instructions:
由于@JFK 说明，这对我有用：
<!DOCTYPE HTML>
<html>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$('a.fancybox').fancybox({
type: "iframe"
});
</script>
</head>
<body>
<a class="fancybox" href="http://www.w3schools.com/" data-fancybox-type="iframe">This goes to iframe</a>
</body>
</html>
回答by Aramis
Seems like cross-domain links are not opening.
I was using localhost, and using href="http://localhost/example/?page_id=7896"only works. If i write href="http://google.com"it doesn't works. In case you can check by putting your site on a domain and use href="http://example.com?page_id=7896"
好像跨域链接打不开。我正在使用本地主机，并且href="http://localhost/example/?page_id=7896"只使用有效。如果我写href="http://google.com"它不起作用。如果您可以通过将您的网站放在域上并使用来检查href="http://example.com?page_id=7896"
In html:
在 html 中：
<a id="iframe" href="http://localhost/example/?page_id=7896">Link</a>
in js:
在js中：
$("#iframe").fancybox({
'type' : 'iframe'
});
