从iframe的父级调用Fancybox [英] call Fancybox in parent from iframe
问题描述
我有2页，我的index.html和social.html。我清理了我的索引，只留下了 fancybox 所需的jquery代码。我想要做的是让图片在社交中.html，当点击它时，它会打开fancybox并显示它，但在index.html中不在iframe中。出现的错误是：
未捕获的TypeError：object [object DOMWindow]的属性'showImage'不是函数
（匿名函数）social.html：103
onclick
这是我的索引。 HTML：
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax /libs/jquery/1.4/jquery.min.js\"></script>
< script type =text / javascriptsrc =js / jquery.fancybox-1.3.4.pack.js>< / script>
< link rel =stylesheettype =text / csshref =css / jquery.fancybox-1.3.4.cssmedia =screen/>
< script type =text / javascriptsrc =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.htmlscrolling =noborder =0width =579height =505allowtransparency =true>< / iframe>
< / body>
< / html>
在IFrame页面中：
< img src =img / picture1.jpgalt =class =thumbsonclick =parent.showImage（'picture1.jpg'）;/>
PS：两页在同一个域中...
编辑：video.js - >这是从fancybox我没有这样做。
jQuery（document）.ready（function（）{
$（。video）。click（function（）{
$ .fancybox（{
'padding'：0，$ b $'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'
}
}）;
返回false;
}）;
}）;
首先，您应该使用fancybox v2.x无缝地做到这一点（修补fancybox v1.3.x不值得）\\ b
$ b
其次，您需要在两页中都有父页面和iframed页面，加载jquery和fancybox css和js文件，以便正确地超越fancybox，
所以在这两个页面中你至少应该有这样的东西：
< link rel =stylesheettype =text / csshref =fancybox2.0.4 / jquery.fancybox.css/>
和
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =fancybox2.0.4 / jquery.fancybox.js>< / script>
然后在您的iframed（儿童）页面中，您的脚本基本上是相同的（但带有正确的fancybox选项对于v2.x ... 在此处查看文档）
$（。video）。click（function（）{
$ .fancybox（{
'padding'：0，
//更多选项（v2.x）等
但不是这个
$ .fancybox（{
执行此操作：
父。$。fancybox（{
然后fancybox将会显示在iframed页面边界外的父页面中
UPDATE ：演示页面
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
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>
in IFrame page:
<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.
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;
});
});
First, you should be using fancybox v2.x to seamlessly do that (patching fancybox v1.3.x doesn't worth the effort)
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" />
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)
$(".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
UPDATE: Demo page here
这篇关于从iframe的父级调用Fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
