Ir para conteúdo

POWERED BY:

Arquivado

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

danyel

IFrame adaptável ao conteúdo

Por , em Desenvolvimento frontend

Recommended Posts

danyel    2

danyel
Postado

Bom dia pessoal.

 

Tenho o seguinte problema:

 

Estou desenvolvendo um site que contém um cabeçalho, uma parte central que vai exibir páginas referentes aos links dos menús e um rodapé. Na parte central, tem um iframe que deverá exibir as páginas. Preciso que iframe tenha o seu tamanho na vertical de acordo com o tamanho de cada página que for aberta através dos links dos menús, ou seja, um iframe com tamanho ajustável na vertical.

 

Estou desenvolvendo o site sem tecnologia de servidor, apenas com HTML e CSS. Como fazer isso sem programação? No entanto, se javascript resolver, tudo bem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Até recomendaria a minha alternativa ao iframe — está em desuso —, mas eu geralmente o faço com client-side.

Enfim:

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


Nota: alterar nomedoiframe com a id do iframe

var F = document.getElementById("nomedoiframe");


Código HTML de exemplo (funcionando)

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>autoHeight();</title>
        <script>
            function autoHeight() {
                var F = document.getElementById("nomedoiframe");
                if (F.contentDocument) {
                    F.height = F.contentDocument.documentElement.scrollHeight + 30;
                } else {
                    F.height = F.contentWindow.document.body.scrollHeight + 30;
                }
            }
            window.onload = autoHeight;
        </script>
    </head>
    <body>
        <iframe width="500" id="nomedoiframe" src="pagina.html" scrolling="no" frameborder="0"></iframe>
    </body>
</html>

 



Funciona em todos os browsers. :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

coloque 100% para o height e, obviamente, o "conteiner" onde estiver o iframe deve possuir também height 100%

Compartilhar este post

Link para o post
Compartilhar em outros sites

danyel    2

danyel
Postado

Ok amigos, deu tudo certo! Obrigado pelo esforço e empenho de vocês.

 

Só por curiosidade, qual a alternativa ao iframe? seria os includes em php?

 

:)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

qual a alternativa ao iframe? seria os includes em php?

Sim. QueryString, PHP. Nesse tópico há a minha solução :seta: http://forum.imasters.com.br/topic/455812-resolvidoframes-modelos-de-pagina-ou-php/

 

--

Por favor, marque como "Resolvido" o post que o levou a solucionar o problema. Esse post será considerado a solução, e ajudará os próximos usuários que acessarem o tópico, caso tenham um problema semelhante.

 

[]s,

Diéssica

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

O iframe serve para uma finalidade diferente do include do PHP.

 

Se a finalidade é incluir páginas no corpo do layout, use PHP, pois iframe não tem muito sentido para isso, a não ser que esteja trabalhando somente com HTML, sem linguagem server-side.

 

Outro exemplo do uso de iframes é puxar uma URL externa, por exemplo.

Isso também pode ser feito com linguagem server-side, mas, usar linguagem server-side para essa finalidade não faz sentido, pois há um custo com processsamento no server que poderia ser evitado deixando esse custo de processo para o browser do cliente.

Há também pequenos detalhes que podem reverter a escolha. É mais questão de logística, modelo de negócios e bom senso.

 

Para ter uma visão mais ampla a cerca do assunto, veja uma situação semelhante entre JavaScript e PHP

http://forum.imasters.com.br/topic/485293-include-em-js/

 

Extendendo o assunto, é errôneo afirmar que iframes estão obsoletos ou em desuso.

Não há nota oficial marcando a tag como "deprecated" ou algo do tipo.

 

O órgão que regulamenta e documenta o HTML oficialmente é o W3C.

O W3C restringiu o uso de iframes para HTML no modo Strict e no XHTML.

A alternativa era usar o elemento <object> para embutir ou carregar objetos externos.

Todavia, criou-se algo pior pois há diferenças entre browsers e suas diversas versões, incompatíveis com a "alternativa".

 

No HTML5, o iframe continua documentado e foi inclusive reformado, contendo alguns novos atributos como o "seamless", "sandbox" e "srcdoc" e, aparentemente não vai entrar em desuso a curto ou médio prazo.

 

Para montar layout, exceto em alguns casos específicos, não é uma boa idéia usar iframe por questões de usabilidade, acessibilidade e principalmente o SEO.

 

Mas para outras finalidades ainda é uma das melhores soluções, como por exemplo, chamar banners, usar como alternativa ao ajax em frame oculto, desenvolver aplicativos em puro HTML para rodar em ambientes locais, etc.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Extendendo o assunto, é errôneo afirmar que iframes estão obsoletos ou em desuso.

 

Neste caso, em desuso, já que antes se usava (aí sim, de forma errônea), agora não mais. Os motivos foram citados no seu próprio tópico: usabilidade, acessibilidade e SEO. O conteúdo é estático.

 

Não é possível ser totalmente dinâmico com iframes. Está em desuso sim para este caso. Se deve optar por uma linguagem client-side, como PHP e Javascript (AJAX é extremamente útil). :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Desculpe ser chato, mas creio que você se equivocou na afirmação - " ... linguagem client-side, como PHP ... ".

Verdade. Acabei querendo dizer server-side e client-side ao mesmo tempo, tanto que disse do AJAX depois.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danyel    2

danyel
Postado

Sim. QueryString, PHP. Nesse tópico há a minha solução :seta: http://forum.imasters.com.br/topic/455812-resolvidoframes-modelos-de-pagina-ou-php/

 

--

Por favor, marque como "Resolvido" o post que o levou a solucionar o problema. Esse post será considerado a solução, e ajudará os próximos usuários que acessarem o tópico, caso tenham um problema semelhante.

 

[]s,

Diéssica

Ok. Marquei o tópico como resolvido. Obrigado pelo empenho e dedicação ao responder os tópicos.

 

Obrigado a todos pelo empenho e dedicação ao responder os tópicos. Estarei a disposição quando precisarem.

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