从 iframe 调用父级中的 Fancybox
Posted
技术标签:
【中文标题】从 iframe 调用父级中的 Fancybox【英文标题】:call Fancybox in parent from iframe 【发布时间】:2012-02-09 20:13:36 【问题描述】:我有 2 个页面,我的 index.html 和 social.html。我清理了我的索引,只留下了fancybox所需的jquery代码我想做的是在social.html中放置图像,当点击它时,它会打开fancybox并显示它,但在index.html中不在里面内嵌框架。出现的错误是:
Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
onclick
这是我的 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 + '" border="0" />');
;
</script>
</head>
<body>
<iframe src="social.html" scrolling="no" border="0" allowtransparency="true"></iframe>
</body>
</html>
在 IFrame 页面中:
<img src="img/picture1.jpg" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>
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;
);
);
【问题讨论】:
这就是我的想法,但事实并非如此,它一直给我这个错误:Sjs/video.js
里面有什么。如果这个 js 有任何错误,那么浏览器 JS 引擎将不会解析 showImage
函数。只有在这种情况下,它才会抛出这个错误。
我刚刚添加了 video.js 代码,但那是直接来自 fancybox 我没有改变任何东西。
在控制台中页面加载时是否看到任何 JS 错误?
【参考方案1】:
首先,您应该使用 fancybox v2.x 无缝地做到这一点(修补 fancybox v1.3.x 并不值得)
其次,你需要在两个页面,父页面和iframed页面中,加载jquery和fancybox的css和js文件,才能正确的超越fancybox,
所以在这两个页面中,您至少应该有类似的内容:
<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>
然后在您的 iframed(子)页面中,您的脚本基本上是相同的(但对于 v2.x 具有正确的 fancybox 选项...check the documentation here)
$(".video").click(function()
$.fancybox(
'padding' : 0,
// more options (v2.x) etc
但不是这个
$.fancybox(
这样做:
parent.$.fancybox(
然后fancybox会显示在iframe页面边界之外的父页面中
更新:Demo page here
【讨论】:
我累了,下载最新版本的一切。如果我只放 $('.fancybox').fancybox(); 在单页(iframe)上它有效,但后来我把 parent.$.('.fancybox').fancybox();它说意外的令牌,如果我把 parent.$('.fancybox').fancybox();它给出了相同的 DOM 错误:S 好吧,如果你累了,那么我们无能为力(所以我想知道你为什么要寻求帮助)......但如果你没有意识到一切的“最新版本”意味着改进您正在使用的软件并修复现有错误。我们不是给你命令,我们是给你解决问题的想法......(y si no quieres, pues no y mucha suerte entonces) 我很抱歉这是一个错字我的意思是“我试过这个”我永远不会放下或不感谢所提供的帮助。我试图同时做几件事,我知道你花了你宝贵的时间给我帮助,不想让你悬而未决,不管它是否有效。当然,拥有最新的任何东西都会更好,因为大多数错误都被删除了,也没有问题。这一切只是一个错字:) 谢谢!!你知道我以前是怎么想的吗?我正在测试本地主机,就像现在我完全复制了你所拥有的但仍然无法工作,所以我上传并且它工作了!疯了吧?但是非常感谢! parent.$.fancybox( 在本地主机上不起作用。当我在实时服务器上保留相同的代码时它起作用了。【参考方案2】:我之前遇到过这个问题并且能够找到解决方案。这是iv所做的。
在我的 iframe 页面中,我使用 href 调用了父窗口,例如
onClick="callMe('www.google.com')"
或者如果图片“/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>
在我的父 html 中,我们设置了一个诱饵链接(这个来自加载 fancybox 的示例)
<body>
<a href="#" class="sample"></a>
</body>
您可以在此处下载一个工作示例。 https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC
【讨论】:
值得一提的是,您的解决方案适用于fancybox v1.3.4,对不想升级的人很有帮助。使用我提出的使用 v2.x 的解决方案,优点是您不需要修改原始的 fancybox 文件,并且您的脚本仍然可以与 fancybox 的未来升级一起使用。 @JFK...谢谢 JFK 我没有意识到您已经将它包含在升级中。无论如何,非常感谢你给我们fancybox。 我没有开发 Fancybox ... Janis 是那个人 ***.com/users/486595/janis 为什么还要使用诱饵链接?如果你看过 Fancybox 提供的例子,就像你说的那样。如何查看我的答案。【参考方案3】:由于 img 位于 iframe 上,因此是不同的网页。所以 Jquery 在 index.html 上,但 img 不在,这就是 JQuery 无法获取图像的原因。
也许使用这样的东西......但我不认为它会工作
关于 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();
);
并将 id 添加到 iframe 声明中
但是,我的建议是使用 div 而不是 iframe。 您还应该从图像中删除 onclick 以获取非干扰 Javascript。
查看教程:http://fancybox.net/howto 如果你想要一个类似的西班牙语教程,你也可以查看我的网站。
【讨论】:
【参考方案4】:您不需要从 fancybox v1.3.x 升级,您的 iframe 页面中也不需要 fancybox。
iframe:
<a href="#" class="fancylink" data-url="www.example.com">Some link</a>
$('.fancylink').click(function()
var url = $(this).attr("data-url");
parent.show_fancybox(url);
);
家长:
function show_fancybox(url)
$.fancybox(
'type' : 'iframe',
'width' : 640,
'height' : 480,
'href' : url
);
【讨论】:
以上是关于从 iframe 调用父级中的 Fancybox的主要内容,如果未能解决你的问题,请参考以下文章
在 Fancybox 中合并“从 iframe 在父级中打开”、“侧面标题”和“自定义标题”