从 iframe 调用父级中的 Fancybox [英] call Fancybox in parent from iframe
问题描述
我有 2 个页面，我的 index.html 和 social.html.我清理了我的索引，只留下 fancybox 所需的 jquery 代码我想要做的是在社交媒体中添加图像.html，当点击它时，它会打开fancybox并显示它，但在index.html中而不是在iframe中.出现的错误是:
I have 2 pages, my index.html and social.html. I cleaned out my index and left only the jquery code need for fancybox What 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:
Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
onclick
这是我的 index.html:
this is my 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>
在 IFrame 页面中:
in IFrame page:
<img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>
PS:两个页面都在同一个域...video.js -> 这是来自fancybox 我没有做这个.
PS: both pages are on same domain... video.js -> this is from fancybox I didn't make this.
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;
});
});
推荐答案
首先，你应该使用fancybox v2.x 来无缝地做到这一点(修补fancybox v1.3.x 不值得付出努力)
First, you should be using fancybox v2.x to seamlessly do that (patching fancybox v1.3.x doesn't worth the effort)
其次，为了正确超越fancybox，你需要在两个页面，父页面和iframed页面，加载jquery和fancybox css和js文件，
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,
所以在两个页面中你至少应该有类似的东西:
so in both pages you should have at least something like:
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
和
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
然后在您的 iframe(子)页面中，您的脚本基本相同(但是对于 v2.x 使用了正确的花式框选项...... 在这里查看文档)
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)
$(".video").click(function() {
$.fancybox({
'padding' : 0,
// more options (v2.x) etc
但不是这个
$.fancybox({
这样做:
parent.$.fancybox({
然后fancybox会显示在iframed页面边界之外的父页面中
then fancybox will show in the parent page out of the boundaries of the iframed page
更新:此处的演示页面
这篇关于从 iframe 调用父级中的 Fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
