将 iFrame 内的 Fancybox 扩展到外部答案

【问题标题】：Extend Fancybox inside an iFrame to outside将 iFrame 内的 Fancybox 扩展到外部
【发布时间】：2011-06-29 22:49:31
【问题描述】：

我在这里遇到了一个问题。我在 iFrame 中有一个 fancybox，它可以正常工作，但我需要将它扩展到 iFrame 之外，以便它可以填满整个屏幕（我的意思是扩展到它的父级）。

有人知道怎么做吗？

【问题讨论】：

标签： javascript jquery iframe fancybox lightbox

【解决方案1】：

如果页面和 iframe 都在同一个域中，您可以从 iframe 内部打开父级中的 fancybox 窗口。查看the demo。

父窗口（包含fancybox脚本、css和iframe）

<iframe src="child-page.htm" height="250" width="500"></iframe>

子页面（包含在父页面调用fancybox的脚本）

$('a').click(function() {
  // target the parent window (same domain only)
  // then call fancybox in the parent
  // You can add any HTML you want inside the fancybox call
  window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});

【讨论】：

虽然我已经删除了 iFrame，但我在删除 iFrame 之前使用的解决方案类似于@fudgey 的答案！再次感谢 =)
你怎么能设计出这样的fancybox？例如：'showCloseButton' : false?
@Drejon fancybox 的样式表应该与脚本一起加载到父窗口中。
是的，但这也会影响父网站上的所有其他花式框。
@Drejon 是的，但是使用较新版本的fancybox，您可以使用帮助选项添加自定义css - updated demo；或使用tpl 选项。

【解决方案2】：

这是不可能的。 iframe 是独立的页面，只能通过 JavaScript 与父级交互，即使这样也是不正当的行为。

无论您做什么，您的 fancybox 都无法延伸到 iframe 之外，但您可以通过 JavaScript 调用父页面上的一个。

这篇文章将从两个方向（父级 -> iframe、iframe -> 父级）回答您的问题：Invoking JavaScript code in an iframe from the parent page

附带说明一下，iframe 大约在 5 年前就已经过时了。我会在任何新作品中避免使用它们。

干杯。 :)

【讨论】：

非常感谢亚当！我知道 iFrame 的老问题，但是客户要求我使用它，所以，我使用了！这在业务上是必要的...... :D 我会检查链接，然后反馈给你！
我们都知道那首曲子。如果您认为我的回答准确，请单击左侧的复选框将其标记为答案。谢谢。
iframe 仍然非常有用。 YouTube 和 Vimeo（我相信还有其他一些）现在使用 iframe 而不是嵌入式视频，因此您可以在 iPad 上观看它们。
@Fudgey - 一切都有其用途，但这显然不是视频或替代内容的场景。 OP 试图在主窗口上方的框架中显示灯箱，清楚地代表实现框架的设计，而不是调用远程内容的结构。
我决定移除 iFrame！尽管由于项目的复杂性，我做了一些艰苦的工作来删除它，但 iFrame 肯定会让我更头疼，然后在项目的当前状态下受益！感谢您的帮助！ =)