从 Iframe 调用父级中的 Fancybox，无需手动打开
Posted
技术标签:
【中文标题】从 Iframe 调用父级中的 Fancybox，无需手动打开【英文标题】：call Fancybox in parent from Iframe with no manual open 【发布时间】：2013-09-03 19:29:54 【问题描述】：我想我可以在这里得到答案 -> call Fancybox in parent from iframe 并且演示页面确实显示了我想要的 (http://www.picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html) 但问题是我没有相同的脚本...
而不是（我猜这是手动打开）：
$(".video").click(function()
$.fancybox(
'padding' : 0,
// more options (v2.x) etc
我这样称呼图片：
$(document).ready(function()
$(".fancybox-thumbs").fancybox(
padding: 0,
// etc
我尝试像这样更改我的代码（基于答案和演示）：
$(document).ready(function()
parent.$(".fancybox-thumbs").fancybox(
padding: 0,
// etc
...但它不起作用。有人可以告诉我应该如何更改 iframe 中的拇指、打开父页面上的图像、调整到屏幕大小的代码？
提前致谢！
【问题讨论】：
如果你console.log( parent.$ ); 记录它存在还是未定义？
Dave，抱歉，我不是 javascript 专家，请告诉我如何将它集成到整个代码中？
@Dave Stein 如果您考虑过：$(document).ready(function() console.log(parent.$); $(".fancybox-thumbs").fancybox( padding: 0, ...它加载图片但不起作用，它以正常方式加载而不考虑父页面屏幕。
你需要下载firebug。谷歌那个。打开控制台。 console.log 会告诉你parent.$ 是否存在。我不是建议 console.log 然后仍然做$('#.fancybox-thumbs')
好的，谢谢 Dave...我笑了，我对 javascript 不太了解...我有 Firebug，但我不知道 consol.log 是什么意思。
【参考方案1】：
我找到了答案，不幸的是从来没有（！）从我自己在论坛上的问题...我与你分享，也许它对某人有帮助：
1 首先，我将 .css 和 .js 文件链接到父 html 和 iframe html。
2 我的父 html
<body>
<div id="more">
<div class="container">
<div id="sensuality-div">
<iframe id="sensuality-frame" src="http://www.igorlaszlo.com/sensuality.html" style="overflow:hidden;height:100%;width:100%;" scrolling="no" allowTransparency="true" frameborder="0" sandbox="allow-same-origin allow-forms allow-scripts" ></iframe>
</div>
</div>
</div>
</body>
3 我的 iframe html
<body id="sensuality-body">
<div class="view view-add">
<img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" />
<div class="mask">
<a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" title="34 Dance in the Dark">
<h4>Dance in the Dark</h4>
<p>Model : Thierry Mercier</p>
<info>Click for zoom</info>
</a>
</div>
</div>
<div class="view view-add">
<img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" />
<div class="mask">
<a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" title="34 Dance in the Dark">
<h4>Dance in the Dark</h4>
<p>Model : Thierry Mercier</p>
<info>Click for zoom</info>
</a>
</div>
</div>
</body>
4 我调用fancybox的原始代码（不是手动打开）如下（我在父页面和iframe页面上都有）：
<script>
$(document).ready(function()
$(".fancybox-thumbs").fancybox(
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
prevEffect : 'elastic',
nextEffect : 'elastic',
closeBtn : true,
arrows : true,
nextClick : true,
beforeShow: function ()
this.title = $(this.element).attr('title');
this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
,
afterShow: function()
,
helpers :
title : type: 'inside'
);
);
</script>
5 黑客：我将找到的代码 (http://www.dynamicdrive.com/forums/archive/index.php/t-56981.html) 与我的代码结合起来，并在 iframe 页面中添加了一个附加脚本：
<script type="text/javascript">
jQuery(function($)
if(top !== window)
var $$ = parent.jQuery;
$$('#sensuality-div').html($('#sensuality-body').html()).find('a').fancybox(
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
prevEffect : 'elastic',
nextEffect : 'elastic',
closeBtn : true,
arrows : true,
nextClick : true,
beforeShow: function ()
this.title = $(this.element).attr('title');
this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
,
afterShow: function()
,
helpers :
title : type: 'inside'
);
$("#sensuality-body a").click(function(e)
$$('#' + this.class).click();
);
else
$("#sensuality-body a").fancybox(
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
prevEffect : 'elastic',
nextEffect : 'elastic',
closeBtn : true,
arrows : true,
nextClick : true,
beforeShow: function ()
this.title = $(this.element).attr('title');
this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
,
afterShow: function()
,
helpers :
title : type: 'inside'
);
);
</script>
也许你可以让它变得更容易，也许我添加了很多不必要的代码，我知道它工作正常......
我看到很多人都在寻找这类问题的解决方案，希望对你有所帮助！
很快你就能在www.igorlaszlo.com看到它
【讨论】：
您很快就能在 www.igorlaszlo.com 上看到它以上是关于从 Iframe 调用父级中的 Fancybox，无需手动打开的主要内容，如果未能解决你的问题，请参考以下文章
在 Fancybox 中合并“从 iframe 在父级中打开”、“侧面标题”和“自定义标题”
Fancybox iframe 内容 - 如何从父级访问 CSS？