exibir jquery prettyPhoto favoritos em iframe pai

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

  •  18-09-2019
  •  | 
  •  

Pergunta

Eu estou usando jQuery 2.5.3 PrettyPhoto e eu queria saber como eu posso obter a caixa de luz para exibição na janela pai de um iframe quando um link de imagem dentro do iframe é selecionada?

Aqui está o meu código:

página no 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>

Quando eu carregar esta página em sua própria caixa de luz funciona bem.

código Iframe: 

<html>
<head>
</head>

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

No entanto, quando eu carregar a página com o iframe e clique sobre o link da imagem na página que está no iframe Eu quero a mesa de luz para exibição na janela pai e não no iframe.

Foi útil?

Solução

Tente este selector: $("#myid", top.document)

O top.document diz o seletor para direcionar o elemento myid que existe no documento (sua página principal) superior. Para que isso ao trabalho, jQuery deve ser carregado no ficheiro que é visto através da iframe.

Fonte: http://groups.google .com / grupo / jquery-en / browse_thread / thread / 5997ef4a60a123af? pli = 1

Editar

Ok obra única maneira que esta vontade é:

  1. Remova o seguinte código a partir de sua página real (inner.html, aquele contido no iframe): 

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

  2. Agora, em sua página iframe, adicione: 

    <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. Além disso, adicione o seguinte código JS: 

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

Isso deve fazer o truque, mas ele irá, em seguida, só funcionam para a página de iframe, e não diretamente de dentro da página real.

Outras dicas

encontrado isso em algum lugar

<base target="_parent" />

colocá-lo dentro da cabeça de IFRAME

Eu resolvi o problema com o iframe usando cópias de dados. Veja o código de script na página principal: Nota: No meu código há uma imagem que começa a galeria e galeria não é visível, a imagem Id é "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();
  });
});

O código iframe html é: 

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

E o div na parte inferior da página que recebe os dados copiados: 

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

Eu fiz testes para FF e IE e executar normalmente.

O código muda que eu fiz foram:

  • Adicionado um novo true / false configuração nas definições que começam na linha 18. ou seja displayIframeContentsInParent: false,

  • Na linha cerca de 92 na if(theGallery) se controle do bloco se a nova configuração foi definida como true e se assim for, pesquisar o conteúdo de iframe para mais imagens na galeria: 

    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'));
   });
}

  • Na linha cerca de 125 na função aberta: no if($.browser.msie && $.browser.version == 6) se bloco else, adicione o seguinte para também caixas hide combinação no iframe: 

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

  • Finalmente, em torno da linha 300 na função de perto: na if($.browser.msie && $.browser.version == 6) se bloco else, adicione o seguinte para fazer as caixas de combinação no iframe visível novamente: 

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

Claro que, quando você usar a foto bonita agora você precisará definir a nova configuração para true para que ele irá procurar o conteúdo de iframe para outras imagens para exibir isto. 

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

Tenho postado um link para essas mudanças no fórum de suporte prettyPhoto por isso espero que, essas mudanças são incorporadas na fonte prettyPhoto.

Eu terminei com isso: 

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

Parece através de todos iframe na página principal. JQuery dentro do código iframe do não é necessária.

Isso é tudo sobre o conteúdo do iFrame deve ser carregado antes de tentar acessá-lo:

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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top