3

Gostaria de saber se existe no CSS, ou JS algo que faça uma TAG que ocupa espaço, fazer com que a TAG 'pai' se adapte ao tamanho da TAG 'filha'. Ex:

<iframe>
   <body>o Body possuí um tamanho que varia de acordo com o conteúdo ex 1000px</body>
</iframe>

o Iframe se eu não adicionar um height (esse height não pode ser %), especificando o tamanho, ele fica com uns 100px; existe algo no CSS que obrigue o iframe se adaptar ao tamanho da tag body, lembrando que não tenho acesso ao iframe, pertence a outro dominio... isso com css ou JS...

Já tentei com JS,

7
  • Qual domínio você está carregando dentro do IFrame? Commented 3/04/2015 às 18:43
  • google.com.br/…
    – abcd
    Commented 3/04/2015 às 18:54
  • A dúvida é interessante, mas a pergunta está baseada em conceitos errados. O que é carregado no IFRAME não fica dentro da tag IFRAME, é um documento completamente separado. Salvo eu ter entendido errado, o que você quer é ajustar um IFRAME ao seu conteúdo, confirma?
    – Largato
    Commented 3/04/2015 às 23:42
  • Isso mesmo, pois por padrão o google adiciona 1820pxde height no iframe, com isso fica sobrando espaço na postagem até não querer mais. Seria ideal se eu usasse uma tela de 240px (X); mas no PC não rola, fica muito espaço em branco. Eu consigo modificar os atributos do iframe, mas não consigo adaptar ele ao que tem """dentro dessa tag"""... por exemplo, adicionar um height: 100%, isso não funciona, tentei diversas coisas e nenhuma deu certo.
    – abcd
    Commented 4/04/2015 às 13:48
  • @abcd, você pode dizer que tipo de serviço está consumindo do google? talvez possa te sugerir algo. Commented 27/08/2015 às 14:22

1 Resposta 1

1

Isso não é possível via CSS pois ele somente altera o estilo dos elementos, não interpreta seus valores. O height: 100% faz com que o elemento (no caso, o iframe) tenha 100% de altura em relação à janela que está exibindo o site. Para alcançar seu objetivo, você precisa manipular o elemento após ele ser carregado.

Utilizando jQuery podemos saber quando o iframe termina de ser carregado, e então após isso, podemos mudar sua altura:

$("iframe").on('load', function() { 
    // Pega a altura total do documento do iframe
    var newHeight = $("iframe").contents().find("body").height() + "px";
    $("iframe").css('height', newHeight);
});

É importante notar que a obtenção dos elementos de dentro de um iframe só é possível caso o site que você esteja abrindo no iframe esteja no mesmo domínio que o seu. Por esse motivo eu não pude hospedar o exemplo no JSFiddle, então deixei em uma pasta em meu site para você poder analisar melhor: http://rafaelalmeidatk.com/demos/so/56902-teste_iframe/


Observação:

Não coloque o código dentro de uma função $(document).ready([...], pois ao apertar F5, o iframe irá voltar para o tamanho inicial e o código não será executado. Para resolver isso, deixe o código fora de qualquer escopo.

1
  • ele é bem claro em dizer que o site no iframe pertence a outro dominio Commented 27/08/2015 às 14:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .