jQuery 从 iframe 调用父级中的 Fancybox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8853727/
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
call Fancybox in parent from iframe
提问by Andres
I have 2 pages, my index.html and social.html. I cleaned out my index and left only the jquery code need for fancyboxWhat I am trying to do is to have images inside social.html and when clicked on it, it would open fancybox and show it but in index.html not inside the iframe. The error that comes up is:
我有 2 页，我的 index.html 和 social.html。我清理了我的索引，只留下了fancybox需要的jquery代码我想要做的是在social.html中放置图像，当点击它时，它会打开fancybox并显示它但在index.html中而不是在iframe中. 出现的错误是：
Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
onclick
this is my index.html:
这是我的 index.html：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
function showImage(image) {
$.fancybox('<img src="img/' + image + '" alt="" border="0" />');
};
</script>
</head>
<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>
in IFrame page:
在 IFrame 页面中：
<img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>
PS: both pages are on same domain... EDIT: video.js -> this is from fancybox I didn't make this.
PS：两个页面都在同一个域...编辑：video.js -> 这是来自fancybox 我没有做这个。
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
回答by JFK
First, you should be using fancybox v2.x to seamlessly do that (patching fancybox v1.3.x doesn't worth the effort)
首先，您应该使用fancybox v2.x 来无缝地做到这一点（修补fancybox v1.3.x 不值得付出努力）
Second, you need to have in both pages, the parent page and the iframed page, loaded jquery and fancybox css and js files in order to transcend fancybox properly,
其次，你需要在两个页面，父页面和 iframe 页面中，加载 jquery 和fancybox css 和 js 文件，以便正确超越fancybox，
so in both pages you should have at least something like:
所以在这两个页面中，你至少应该有类似的东西：
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
and
和
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
then in your iframed (child) page your script is basically the same (but with the right fancybox options for v2.x ... check the documentation here)
然后在您的 iframe（子）页面中，您的脚本基本相同（但对于 v2.x 使用了正确的花式框选项...请查看此处的文档）
$(".video").click(function() {
$.fancybox({
'padding' : 0,
// more options (v2.x) etc
but instead of this
但不是这个
$.fancybox({
do this:
做这个：
parent.$.fancybox({
then fancybox will show in the parent page out of the boundaries of the iframed page
然后fancybox将显示在iframed页面边界之外的父页面中
UPDATE: Demo page here
更新：演示页面在这里
回答by H27studio
Since the img is on an iframe is a different webpage. So Jquery is on index.html but the img doesnt, thats why JQuery cant get to the image.
由于 img 位于 iframe 上，因此是不同的网页。所以 Jquery 在 index.html 上，但 img 没有，这就是 JQuery 无法获取图像的原因。
Maybe using something like this... But i dont think it would work
也许使用这样的东西......但我不认为它会起作用
On index.html script part
在 index.html 脚本部分
$(document).ready(function () {
//function to active fancybox on the thumbs class inside the iframe
//Not sure it works on iframes, probably it doesnt.
$("#iframeID.thumbs").fancybox();
});
And add the id to the iframe declaration < iframe src=\"social.html\" id="iframeID" etc... rest of properties>
并将 id 添加到 iframe 声明 < iframe src=\"social.html\" id="iframeID" etc... rest of properties>
But, my advice is to use divs instead of iframes. You also should remove the onclick from the image for non-obstrusive Javascript.
但是，我的建议是使用 div 而不是 iframe。您还应该为非干扰性 Javascript 从图像中删除 onclick。
Check the tutorial: http://fancybox.net/howtoIf you want a similar tutorial in spanish you can check my site too.
查看教程：http: //fancybox.net/howto如果你想要一个类似的西班牙语教程，你也可以查看我的网站。
回答by drexsien
Ive encounter this problem before and was able to find a solution. Here is what iv done.
in my iframe page i called the parent window with the href e.g.
onClick="callMe('www.google.com')"or if pics "/images/pics.png"
and call this script in my parent page
我以前遇到过这个问题并且能够找到解决方案。这是 iv 所做的。在我的 iframe 页面中，我使用 href 例如onClick="callMe('www.google.com')"或如果 pics "/images/pics.png" 调用父窗口
并在我的父页面中调用此脚本
<script type="text/javascript">
function callMe(site){
$(".sample").fancybox({
'width' : '97%',
'height' : '97%',
'href' : ''+site+'' //force href to change its site from the call function in the iframe page
});
readyFancy() call to trigger the decoy link page
}
function readyFancy(){
$("a.sample").trigger("click");
}
</script>
in my parent html we right a decoy link (this one is from the example on load fancybox)
在我的父 html 中，我们正确设置了一个诱饵链接（这个来自加载fancybox 的示例）
<body>
<a href="#" class="sample"></a>
</body>
You can download a working example here.. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC
你可以在这里下载一个工作示例.. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC
