Расширьте Fancybox внутри iFrame наружу

Question

Я застрял в проблеме здесь. В iFrame у меня есть fancybox, и он работает нормально, но мне нужно, чтобы он выходил за пределы iFrame, чтобы он мог заполнить весь экран (я имею в виду, простираться до его родителя).

Кто-нибудь знает, как это сделать?

Answer 1

Если страница и элемент iframe находятся в одном домене, вы можете открыть окно fancybox в родительском элементе изнутри элемента iframe. Проверьте демо .

Родительское окно (содержит скрипт 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">');
});

Answer 2

Это невозможно.Iframes являются независимыми страницами и могут взаимодействовать с родителем только через JavaScript, и даже в этом случае они ведут себя неадекватно.

Ваш fancybox не может расширяться из iframe, независимо от того, что вы делаете, но с некоторой работой вы можете вызвать однуна родительской странице с помощью JavaScript.

Этот пост ответит на ваш вопрос в обоих направлениях (parent -> iframe, iframe -> parent): Вызов JavaScript-кода в iframe с родительской страницы

В качестве дополнительного примечания, iframes выпали из моды около 5 лет назад.Я бы избегал их в любом новом производстве.

Приветствия.:)