Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Superwagtel

Iframe Auto-Adaptável

Por , em Desenvolvimento frontend

Recommended Posts

Superwagtel    1

Superwagtel
Postado

Tenho um script que redimenciona o iframe de acordo com o conteúdo da página:

 

No Head

<head>

<script>
function autoHeight() {
var F = document.getElementById("1");
if (F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight + 30;
} else {
F.height = F.contentWindow.document.body.scrollHeight + 30;
}}
window.onload = autoHeight;
</script>

</head>

No Body

<body>

<iframe width="500" id="1" src="pagina1.html" scrolling="no" frameborder="0"></iframe>

</body>

Mas o problema é que este código funciona apenas uma vez em cada página.

 

Mesmo se eu digitar o id='2' para o segundo iframe na mesma pagina, ele não funciona.

 

 

No Head

<head>

<script>
function autoHeight() {
var F = document.getElementById("2");
if (F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight + 30;
} else {
F.height = F.contentWindow.document.body.scrollHeight + 30;
}}
window.onload = autoHeight;
</script>

</head>

No Body

<body>

<iframe width="500" id="2" src="pagina2.html" scrolling="no" frameborder="0"></iframe>

</body>

Alguém saberia me dizer o que fazer para corrigir este problema?

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Superwagtel    1

Superwagtel
Postado

Eu troquei o 'id' por 'class':

<iframe width="200" class="1" src="pagina1.php" scrolling="no" frameborder="0"></iframe>
<iframe width="200" class="2" src="pagina2.php" scrolling="no" frameborder="0"></iframe>

Mas foi pior, o redimencionamento falhou para ambos os iframes

 

Acredito que se eu criar uma folha de estios externa, vai funcionar, mas ainda não deu certo:

 

Eu criei a página "body.css"

 

nela eu coloquei o código:

<script>
function autoHeight() {
var F = document.getElementById("1");
if (F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight + 30;
} else {
F.height = F.contentWindow.document.body.scrollHeight + 30;
}}
window.onload = autoHeight;
</script>
 
 
<script>
function autoHeight() {
var G = document.getElementById("2");
if (G.contentDocument) {
G.height = G.contentDocument.documentElement.scrollHeight + 30;
} else {
G.height = G.contentWindow.document.body.scrollHeight + 30;
}}
window.onload = autoHeight;
</script>

E na página coloquei a URL:

<link href="../body.css" rel="stylesheet" type="text/css">

Mas ele sequer reconheceu a 'class'

 

Onde estou errando na página 'body.css', por que o código sequer reconhece a 'class'?

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

É que "var F = document.getElementById("1");" está pegando por id, e como não tem mais id, a função não executa.

Que eu saiba, não tem como pegar a classe por javascript... mas com jQuery sim.

 

Procurei no google alguns códigos que possam te ajudar...

 

Tente:

 

   $(document).ready(function() {
      myIframe = $("ID").attr("src","pagina1.html?" + new Date().getTime());
      $(myIframe).load(function() {          
        var myDoc = (myIframe.get(0).contentDocument) ? myIframe.get(0).contentDocument : myIframe.get(0).contentWindow.document;
        myIframe.height(myDoc.body.scrollHeight+10);
      });
    });

E como é jQuery, vc precisa tbm linkar uma biblioteca jQuery ao seu site.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito