IFRAME s 100% Visina automatski

Neka od mogućih rješenja za IFRAME visina dinamički kao sadržaj prikazuje.

Problem

Deixar um IFRAME com altura automática, kao sadržaj predstavljen, To bi moglo biti nešto više jednostavan za napraviti, mas as vezes não é. Existem problemas de compatibilidade com navegadores no uso de algumas propriedades javascript, inclusive diferenças para determinar a medida (pixels), na primjer, de uma tag P. As soluções apresentadas talvez ainda não sejam definitivas, mas certamente irão ajudá-lo.

O código foi testado no Internet Explorer 9, Firefox 14.0.1 e Chrome 21.0.1180.8.

Rješenje

Em todos os casos apresentados a seguir, seu IFRAME deve ser algo como isto:

1
2
3
4
  <tijelo>
    Ispod, temos um IFRAME<Br />
    <iframe id="iframe1" src="iframe.html" width="" height=""></iframe>
  </tijelo>

Napomena: Você pode definir a largura que seu IFRAME deverá assumir utilizando o atributo width. Também é interessante, conforme a aplicação, utilizar os atributos frameborder=’0′ i scrolling=’no, que significasem borda” i “sem barra de rolagem”, odnosno.

Opção 1 – JQuery

Este caso, a princípio, serve apenas para IFRAME cujo arquivo carregado via SRC esteja junto, no mesmo servidor e domínio, portanto, não adianta apontar para páginas em outros domínios. Após pesquisar, fiz uma combinação com partes de scripts encontrados na Internet, referenciados no final do Post. U svakom slučaju, não há qualquer garantia de funcionamento sob determinadas circunstâncias ou estrutura da página a ser carregada.

Tive algumas dificuldades para chegar a uma solução, pois o método .load() não funcionava corretamente no Internet Explorer, já que parecia guardar em cache a referência para página carregada. Isto foi resolvido usando um artifício de adicionar ao final da URL uma numeração, baseada no getTime(), que retorna o número de milissegundos desde 01/01/1970.

O bom deste script é que você só precisa colocá-lo entre as tags HEAD da sua página onde fica o IFRAME. naravno, altere o ID do IFRAME para o seu, que no exemplo chamei de “#iframe1 i, por fim, ajuste o atributo SRC para a página que você vai carregar, que no exemplo chamei de iframe.html. Note a chamada para o JQuery logo no início; se você já fez isso, pode omiti-la.

1
2
3
4
5
6
7
8
9
10
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></skripta>
  <script type="text/javascript">
    $(dokument).spreman(funkcija() {
      myIframe = $("#iframe1").attr("src","iframe.html?" + novi Date().getTime());
      $(myIframe).load(funkcija() {          
        var myDoc = (myIframe.get(0).contentDocument) ? myIframe.get(0).contentDocument : myIframe.get(0).contentWindow.dokument;
        myIframe.height(myDoc.tijelo.scrollHeight+10);
      });
    });
  </skripta>

Opção 2 – CSS

Uma outra solução interessante da InHosting, faz uso somente de CSS e talvez possa lhe servir caso queira carregar apenas um único IFRAME. Infelizmente é bastante limitada e não funciona corretamente para outras finalidades. Você pode carregar (embutir) páginas de outros domínios.

1
2
3
4
  <style type="text/css">
    HTML, tijelo, div, iframe {margin:0; padding:0; height:100%}
    iframe {display:block; width:100%; border:none}
  </stil>

Opção 3 – Javascript

Neste método, você precisa ter acesso ao código-fonte do arquivo que será exibido dentro do IFRAME, para adicionar um script. Mas é simples e trabalha bem. Tako, é um processo feito em duas partes:

(1) Você define seu IFRAME, nešto poput:
index.html

1
2
3
4
5
...
  <tijelo>
    <iframe id="iframe1" src="iframe.html" width="" height=""></iframe>
  </tijelo>
...

(2) Faz a chamada Javascript dentro do do arquivo definido no SRC do IFRAME:
iframe.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<HTML>
  <glava>
    <script type="text/javascript">
      window.onload = funkcija(){
         parent.dokument.getElementById("iframe1").height = dokument.getElementById("myDoc").scrollHeight + 35;
     }
    </skripta>
  </glava>
  <tijelo>
    <div id="myDoc">
       <p>AQUI VAI O SEU TEXTO</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>
       <p>Texto</p>  
    </div>
  </tijelo>
</HTML>

Napomena: Não esqueça de alterar o ID do seu IFRAME para que getElementById() não falhe!

Caso você use outra solução mais eficiente, Molim te, compartilhe!

Fontovi

Ukupno pogodaka: 37446

19 Komentari na “IFRAME s 100% Visina automatski

  1. Jorgeana Rekao je:

    Testei aqui no Firefox e funcionou certinho!! No IE 10 pede pra executar um complemento activex, ai depois de permitir exibe a página corretamente, conforme o conteúdo.
    Já no Google Chrome o iframe ficou bem pequeno e não consegui ajustar
    Eu usei a opção 1 do jQuery e a única coisa que alterei foi o nome da página e o width=”700″.
    Alguma dica para resolver o problema?
    Hvala!!

  2. Daniel Filipe Rekao je:

    Cara magistral isso que você nos apresentou, fiquei o dia inteiro procurando sistemas de paginação com jquery para não precisar fazer a página carregar toda hora (mas são muito complexos), dai pensei em colocar em um frame ai só precisa carregar o frame usando php e mysql somente, mas estava apanhando para a altura do frame. Puno ti hvala! 100%.

  3. Wesley Rekao je:

    Genial, passei horas em busca de um código que funciona-se e esse funcionou perfeito! Agora consigo abrir um PDF dentro do IFRAME e fazer um redirecionamento na própria página para baixar um .zip enquanto lê o livro.

Deixe uma resposta para Taylor Lee Odustani odgovor

Na vašu e-mail adresu će biti objavljen. Obavezna polja označena su sa *