javascript 将 iFrame 内部的 Fancybox 扩展到外部

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6528177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 20:57:45  来源:igfitidea点击:

Extend Fancybox inside an iFrame to outside

javascriptjqueryiframefancyboxlightbox

提问by Armando Freire

I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).

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

Does anybody knows how to do that?

有人知道该怎么做吗?

回答by Mottie

If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.

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

Parent Window(contains fancybox script, css and iframe)

父窗口(包含fancybox 脚本、css 和iframe)

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

Child Page(contains script to call fancybox in the parent)

子页面(包含在父页面中调用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">');
});

回答by Adam Terlson

It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.

这是不可能的。iframe 是独立的页面,只能通过 JavaScript 与父页面交互,即便如此,它也是一种阴暗的行为。

Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.

无论您做什么,您的fancybox 都无法扩展到iframe 之外,但是通过一些工作,您可以通过JavaScript 调用父页面上的一个。

This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page

这篇文章将从两个方向回答您的问题(父 -> iframe、iframe -> 父): 从父页面调用 iframe 中的 JavaScript 代码

As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.

附带说明一下,大约 5 年前,iframe 已经不流行了。我会在任何新作品中避免使用它们。

Cheers. :)

干杯。:)