отобразить лайтбокс jquery prettyPhoto в родительском фрейме iframe

StackOverflow https://stackoverflow.com/questions/1483227

  •  18-09-2019
  •  | 
  •  

Вопрос

Я использую jquery prettyphoto 2.5.3, и мне было интересно, как я могу заставить световой блок отображаться в родительском окне iframe, когда выбрана ссылка на изображение внутри iframe?

Вот мой код:

Страница в iframe:

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>

<body>
    <a href="animage.jpg" rel="prettyPhoto">
                <img src="animage.jpg" height="200" width="200"/>
    </a>
            <script type="text/javascript" charset="utf-8">
              $(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto();
              });
    </script>
</body>

Когда я загружаю эту страницу сам по себе, лайтбокс работает нормально.

Код Iframe:

<html>
<head>
</head>

<body>
    <iframe src="inner.html"/>
</body>
</html>

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

Это было полезно?

Решение

Попробуйте этот селектор: $("#myid", top.document)

Top.document указывает селектору выбрать элемент myid, который существует в самом верхнем документе (вашей родительской странице).Для того, чтобы это работало, jQuery должен быть загружен в файл, который просматривается через iframe.

Источник: http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1

Редактировать

Хорошо, единственный способ, которым это сработает, это:

  1. Удалите следующий код из вашей реальной страницы (inner.html тот, содержащиеся в iframe):

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto();
      });

  2. Теперь на вашей странице iframe добавьте:

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

  3. Также добавьте следующий JS-код:

    $(function() {
    $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } );
});

Это должно сработать, но тогда это будет работать ТОЛЬКО для страницы iframe, а не непосредственно с реальной страницы.

Другие советы

нашел это где-то

<base target="_parent" />

поместите это в заголовок IFRAME

Я решил проблему с iframe, используя копии данных.См. код сценария на главной странице:Примечание:В моем коде есть изображение, которое запускает галерею, но галерея не видна, идентификатор изображения — «btngaleria». 

$("#iPrincipal").load(function(){
  $("#iPrincipal").contents().find("#btngaleria").click(function() { 
    var temp=$("#iPrincipal").contents().find("#galeria").html();
    $("#galeria").html(temp);
    $("#galeria:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',slideshow:4000, autoplay_slideshow: true});
    $("#galeria li:first a").click();
  });
});

HTML-код iframe:

<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>

И div внизу страницы, который получает скопированные данные:

<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>

Я сделал тесты для FF и IE и заработал нормально.

Изменения кода, которые я внес, были:

  • Добавлен новый параметр true/false в настройках, которые начинаются со строки 18.то есть displayIframeContentsInParent: false,

  • Примерно на линии 92 в if(theGallery) if block проверьте, установлено ли для нового параметра значение true, и если да, найдите в содержимом iframe дополнительные изображения в галерее:

    if(settings.displayIframeContentsInParent)
{
   $("iframe").contents().find('a[rel*='+theGallery+']').each(function(i) {
      if($(this)[0] === $(link)[0]) setPosition = i;
 images.push($(this).attr('href'));
 titles.push($(this).find('img').attr('alt'));
 descriptions.push($(this).attr('title'));
   });
}

  • Примерно в строке 125 в открытой функции:в if($.browser.msie && $.browser.version == 6) if else Block, добавьте следующее, чтобы также скрыть поля со списком в iframe:

    if(settings.displayIframeContentsInParent)
{
    $("iframe").contents().find('select').css('visibility','hidden');
}

  • Наконец, примерно на строке 300 в функции закрытия:в if($.browser.msie && $.browser.version == 6) if else Block, добавьте следующее, чтобы снова сделать поля со списком в iframe видимыми:

    if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}

Конечно, теперь, когда вы используете красивую фотографию, вам нужно будет установить для нового параметра значение true, чтобы он выполнял поиск в содержимом iframe других изображений для отображения, т.е.

$("a[rel='prettyphoto']").each(function() {
  $(this).prettyPhoto(displayIframeContentsInParent: true);
});

Я разместил ссылку на эти изменения на форуме поддержки PrettyPhoto, так что, надеюсь, эти изменения будут включены в исходный код PrettyPhoto.

Я закончил на этом:

<script type="text/javascript">
    $('iframe').load(function(){
    $(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Он просматривает все iframe на главной странице.JQuery внутри кода iframe не требуется.

Вот и все, что содержимое iFrame должно быть загружено, прежде чем вы попытаетесь получить к нему доступ:

http://grasshopperpebbles.com/ajax/using-jquery-to-access-iframe-content/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top