IFRAME z 100% višina samodejno

Možne rešitve, da bi IFRAME višina dinamično vsebino prikazani.

Problem

Deixar um IFRAME com altura automática, kot vsebino, To je lahko nekaj bolj enostavno narediti, mas as vezes não é. Existem problemas de compatibilidade com navegadores no uso de algumas propriedades javascript, inclusive diferenças para determinar a medida (slikovnih pik), na primer, 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.

Rešitev

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

1
2
3
4
  <telo>
    Pod, temos um IFRAME<Br />
    <iframe id="iframe1" src="iframe.html" širina="" height=""></iframe>
  </telo>

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

Možnost 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. Enfim, 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. seveda, altere o ID do IFRAME para o seu, que no exemplo chamei de “#iframe1 in, 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"></scenarij>
  <skript tipa="text/javascript">
    $(dokument).pripravljen(Funkcija() {
      myIframe = $("#iframe1").attr("src","iframe.html?" + nove Date().getTime());
      $(myIframe).load(Funkcija() {          
        var myDoc = (myIframe.get(0).contentDocument) ? myIframe.get(0).contentDocument : myIframe.get(0).contentWindow.dokument;
        myIframe.height(myDoc.telo.scrollHeight+10);
      });
    });
  </scenarij>

Možnost 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, telo, div, iframe {margin:0; padding:0; height:100%}
    iframe {display:block; širina:100%; border:none}
  </slog>

Možnost 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, nekaj podobnega:
index.html

1
2
3
4
5
...
  <telo>
    <iframe id="iframe1" src="iframe.html" širina="" height=""></iframe>
  </telo>
...

(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>
  <vodja>
    <skript tipa="text/javascript">
      window.onload = Funkcija(){
         parent.dokument.getElementById("iframe1").height = dokument.getElementById("myDoc").scrollHeight + 35;
     }
    </scenarij>
  </vodja>
  <telo>
    <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>
  </telo>
</HTML>

Opomba: 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, prosim, compartilhe!

Fontes

Skupaj zadetkov: 38487

19 pripombe na “IFRAME z 100% višina samodejno

  1. Jorgeana je dejal:

    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 je dejal:

    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. Muito Obrigado mesmo! 100%.

  3. Wesley je dejal:

    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.

pusti odgovor

Na vaš e-poštni naslov ne bo objavljen. Zahtevana polja so označena z *