Auto Height com jQuery - Problemas

mah2602 · 27 de abril de 2012

Olá,

Estou desenvolvendo um site que precisa ter um iframe no index linkando pra página de notícias. Está no mesmo domínio, e como o conteúdo pode variar eu procurei uma solução que definisse automaticamente a altura do iframe de acordo com o conteúdo.

Achei esse plugin do jQuery, mas não está funcionando. https://github.com/house9/jquery-iframe-auto-height

Se alguém puder me ajudar a descobrir a falha, serei eternamente grata.

Segue o código abreviado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
(..)

   <!-- CSS
  ================================================== -->
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/skeleton.css">
	<link rel="stylesheet" type="text/css" href="css/layout.css">
        <link rel="stylesheet" type="text/css" href="css/menu.css" />


(..)

</head>
<body>


(..)

<div id="logo" class="sixteen columns"> </div>

<div class="sixteen columns">
<iframe allowtransparency="true" src="slider/slider.html" id="slider" frameborder="0" scrolling="no"></iframe>
</div>

<div id="noticias" class="sixteen columns">
<iframe id="noticias" src="http://site.com.br/blog" class="auto-height" scrolling="no" frameborder="0"></iframe>
<script>
  $('iframe.auto-height').iframeAutoHeight({minHeight: 240});
</script>
</div>
(..)
	</div>
<!-- container -->



	<!-- JS
	================================================== -->

	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/tabs.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/sprite.js"></script>
    <script type="text/javascript" src="js/jquery.iframe-auto-height.plugin.1.6.0.js"></script>
<script>
  $(document).ready(function () {
    $('iframe').iframeAutoHeight({debug: true});  
  });
</script>


<!-- End Document
================================================== -->
</body>
</html>

CSS:

#noticias{

width:940px;

padding-bottom:10px;

overflow:hidden;

height:auto;

}

DiF · 27 de abril de 2012

olá, você ja tentou fazer assim:

dessa forma você acessa o elemento identificador da div


<script type="text/javascript">
  $(document).ready(function(){
       $('#noticia').iframeAutoHeight({minHeight: 240});
    });
</script>

ou

dessa forma que pega o elemento direto


<script type="text/javascript">
  $(document).ready(function(){
       $(iframe').iframeAutoHeight({minHeight: 240});
    });
</script>

nao sei porque você tm o id #noticias para a div noticias e para o iframe juntos.. isso nao dá conflito?

mah2602 · 27 de abril de 2012

Oi dif.. tentei assim agora e não deu certo.. o jQuery tá de brincadeira cmg hoje.

Ontem quando eu achei esse script cheguei a testar online e deu certo.. criei uma pasta no host 'novosite' e subi tudo pra ver se o height acompanhava e deu certinho.. mas como ele não funciona no host local eu desativei os scripts com  e coloquei um height temportário só o suficiente pra visualizar a primeira página do iframe. Aí hoje quando reativei os scripts e subi o site, ele resolveu não funcionar!

O id eu já tirei, eu to ficando meio doida de tanto que testo pra tentar fazer funcionar de novo.

DiF · 27 de abril de 2012

tenta definir o tamanho na propria iframe

e tenta no jquery sem o parametro:


 <script type="text/javascript">
     $(document).ready(function(){
      jQuery('iframe').iframeAutoHeight();
});
    </script>

mah2602 · 27 de abril de 2012

Não funcionou.. eu acho estranho que esse mesmo código que eu postei funcionou ontem, então só podem ser duas coisas:

1 - O java do iframe tá conflitando com os outros

2 - Problema com o domínio

Ontem eu testei no domínio: http://site.com.br/novosite/index.html e funcionou.

Hoje eu coloquei o site no ar, portanto o domínio ficou: http://site.com.br/index.html e não funcionou.

O domíno do iframe é http://site.com.br/blog

Eu tentei colocar assim no código:

<iframe id="noticias" src="blog/index.php" class="auto-height" scrolling="no" frameborder="0"></iframe>

E ainda nao funcionou.

Então eu acho que o problema só pode ser um conflito entre os scripts, mas eu não lembro de ter adicionado nenhum depois de ter testado e funcionado. Os que estão aí só servem pro menu e eu acredito que estavam antes quando eu testei.

DiF · 27 de abril de 2012

é bem provavel que pode ser algum tipo de conflito mesmo.. como eu ja havia pensado..

tenta incluir a funçao:

jQuery.noConflict();

exemplo:


<script type="text/javascript">
  $(document).ready(function(){
       jQuery.noConflict();
       $(iframe').iframeAutoHeight({minHeight: 240});
    });
</script>

essa funçao livra de possiveis conflitos.. se você tiver outros plugins jQuery na mesma pagina

mah2602 · 28 de abril de 2012

Testei tirar os links para os javas do menu e só deixei o do jquery e do plugin, e ainda não funcionou.

Continuo tentanto, se conseguir posto aqui.

mah2602 · 30 de abril de 2012

Depois de 3 dias pesquisando e várias tentativas encontrei a solução:

O problema realmente era o fato do iframe estar em um sub-domínio. Para evitar o erro de segurança é só "informar" ao jQuery que ambas as páginas estão no mesmo domínio.

Coloquei o seguinte código na página que chama o iframe e na do iframe: