[英]call Fancybox in parent from iframe
我有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
这是我的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页面中:
<img src="img/picture1.jpg" alt="" 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;
});
});
首先,您应该使用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选项... 请查看此处的文档 )
$(".video").click(function() {
$.fancybox({
'padding' : 0,
// more options (v2.x) etc
而不是这个
$.fancybox({
做这个:
parent.$.fancybox({
然后fancybox将在iframed页面边界的父页面中显示
更新 : 演示页面在这里
由于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声明<iframe src = \\“social.html \\”id =“iframeID”等...其余属性>
但是,我的建议是使用div而不是iframe。 您还应该从图像中删除onclick以获取非阻碍性Javascript。
查看教程: http : //fancybox.net/howto如果你想要一个西班牙语的类似教程,你也可以查看我的网站。
我以前遇到过这个问题,并且能够找到解决方案。 这是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>
在我的父html中,我们右边是一个诱饵链接(这个是来自加载fancybox的示例)
<body>
<a href="#" class="sample"></a>
</body>
您可以在此处下载一个有效的示例.. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.